/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom · enrichment: Tier A (HTML/CSS report mock) · nav: N9 · footer: Ft2
 * tone: calm, precise, Kanzlei · anchor hue: 155 (muted green) + brass marks
 * axes: light / roman-serif / chromatic-green · fonts: Newsreader + IBM Plex Sans
 */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-feature-settings: "kern";
  padding-bottom: var(--space-3xl);
}
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

/* ---------- nav N9 ---------- */
.nav-edge {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding: var(--space-md) max(var(--page-gutter), calc((100% - 76rem) / 2 + var(--page-gutter)));
  border-bottom: var(--rule-hair);
}
.wordmark { font-family: var(--font-display); font-size: var(--text-md); text-decoration: none; white-space: nowrap; }
.wordmark__by { display: none; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-neutral); margin-left: var(--space-xs); }
.link-cta {
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none;
  color: var(--color-accent-2); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
@media (min-width: 40rem) { .wordmark__by { display: inline; } }

/* ---------- shared ---------- */
main > section { padding: var(--space-2xl) var(--page-gutter); max-width: 76rem; margin-inline: auto; }
.h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl);
  line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0;
  margin-bottom: var(--space-md);
}
@media (min-width: 60rem) { .h2 { font-size: var(--text-2xl); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-sm) var(--space-lg);
  font: 500 var(--text-base)/1.2 var(--font-body); white-space: nowrap;
  text-decoration: none; cursor: pointer; border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn--primary { background: var(--color-ink); color: var(--color-on-ink); }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--sm { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
  .btn--outline:hover { background: var(--color-paper-3); }
  .link-quiet:hover, .link-cta:hover { color: var(--color-accent); }
}
.link-quiet { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }

/* ---------- hero (split) ---------- */
.hero { display: grid; gap: var(--space-xl); padding-top: var(--space-xl) !important; }
.hero__title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-display);
  line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0;
  max-width: 14ch;
}
.hero__title em { font-style: italic; color: var(--color-accent-2); }
.hero__lede { margin-top: var(--space-lg); font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); max-width: 38ch; }
.hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.hero__actions .btn { width: 100%; }
.hero__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); }
@media (min-width: 30rem) { .hero__actions .btn { width: auto; } }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--space-3xl); padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }
}

/* report mock */
.report {
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-md);
  padding: var(--space-lg); box-shadow: var(--shadow-whisper);
}
.report__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; padding-bottom: var(--space-sm); border-bottom: var(--rule-ink); }
.report__kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.report__name { font-family: var(--font-display); font-style: italic; color: var(--color-muted); }
.report__row {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) 0; border-bottom: var(--rule-hair); font-size: var(--text-sm);
}
.report__status { font-size: var(--text-xs); font-weight: 500; white-space: nowrap; padding: 2px var(--space-xs); border-radius: var(--radius-sm); }
.is-bad .report__status { background: var(--color-brass-bg); color: var(--color-muted); }
.is-ok .report__status { background: var(--color-accent-bg); color: var(--color-accent-2); }
.report__mark { position: relative; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--color-rule); border-radius: 50%; }
.report__mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.is-ok .report__mark { border-color: var(--color-accent); background: var(--color-accent); }
.is-ok .report__mark::after { inset: auto; left: 50%; top: 44%; width: .45rem; height: .25rem; border: 2px solid var(--color-on-ink); border-top: 0; border-right: 0; border-radius: 0; transform: translate(-50%, -50%) rotate(-45deg); }
.is-bad .report__mark::after { inset: 3px; background: var(--color-brass); }
.report__cap { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.5; }

/* the report fills itself in, once */
.js .report__mark, .js .report__status { opacity: 0; transform: scale(.6); }
.js .report.is-on .report__mark, .js .report.is-on .report__status {
  animation: tick var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(400ms + var(--i, 0) * 260ms);
}
@keyframes tick { to { opacity: 1; transform: none; } }

/* ---------- findings (split: sticky intro / list) ---------- */
.findings { display: grid; gap: var(--space-xl); border-top: var(--rule-hair); }
.findings__intro p { color: var(--color-muted); max-width: 46ch; }
.findings__intro p + p { margin-top: var(--space-md); }
.findings__aside { font-family: var(--font-display); font-style: italic; font-size: var(--text-md); color: var(--color-ink) !important; }
.findings__list { counter-reset: f; }
.finding { counter-increment: f; position: relative; padding: var(--space-lg) 0 var(--space-lg) var(--space-xl); border-bottom: var(--rule-hair); }
.finding:first-child { border-top: var(--rule-hair); }
.finding::before {
  content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--space-lg) + 0.2em);
  font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-brass);
}
.finding__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); line-height: 1.3; }
.finding__cost { margin-top: var(--space-xs); color: var(--color-muted); max-width: 60ch; }
.finding__cost sup a { color: var(--color-accent-2); text-decoration: none; font-weight: 600; padding: 0 2px; }
@media (min-width: 60rem) {
  .findings { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); padding-top: var(--space-3xl) !important; }
  .findings__intro { position: sticky; top: var(--space-xl); align-self: start; }
}

/* ---------- steps ---------- */
.steps { background: var(--color-paper-2); max-width: none !important; }
.steps > * { max-width: 76rem; margin-inline: auto; }
.steps__list { display: grid; gap: var(--space-lg); }
.step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-sm); }
.step__n { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--color-accent-2); }
.step__title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2xs); }
.step p { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 48rem) { .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }

/* ---------- menu ---------- */
.menu { padding-top: var(--space-3xl) !important; }
.menu__head p { color: var(--color-muted); max-width: 52ch; }
.bundles { margin-top: var(--space-xl); display: grid; gap: var(--space-md); }
.bundle {
  display: grid; gap: var(--space-xs); align-content: start;
  padding: var(--space-lg); border: var(--rule-hair); border-radius: var(--radius-md); background: var(--color-paper);
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.bundle--main { border-color: var(--color-ink); }
.bundle.is-active { border-color: var(--color-accent); background: var(--color-accent-bg); }
.bundle__name { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.bundle__price { font-size: var(--text-lg); font-weight: 500; }
.bundle__plus { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.bundle__desc { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.bundle .btn { justify-self: start; }
@media (min-width: 60rem) {
  .bundles { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr); }
}

.carte { margin-top: var(--space-2xl); display: grid; gap: var(--space-xl); }
.carte__group { border: 0; padding: 0; min-width: 0; }
.carte__group legend {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
  padding: 0 0 var(--space-xs); width: 100%; border-bottom: var(--rule-ink);
}
.legend__note { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); line-height: 1.4; color: var(--color-neutral); margin-top: var(--space-3xs, 0.25rem); }

.item {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-xs) var(--space-sm);
  padding: var(--space-md) 0; border-bottom: var(--rule-hair); cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.item--qty { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.item__check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-sm); cursor: pointer; }
.item--qty .qty { grid-column: 1 / -1; padding-left: calc(1.5rem + var(--space-sm)); }
.item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0.2rem 0 0; width: 1.25rem; height: 1.25rem;
  border: 1.5px solid var(--color-ink); border-radius: 3px; background: var(--color-paper); cursor: pointer;
  display: grid; place-content: center;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.item input[type="checkbox"]::after {
  content: ""; width: .7rem; height: .4rem; border: 2px solid var(--color-on-ink); border-top: 0; border-right: 0;
  transform: rotate(-45deg) scale(0); transform-origin: center; margin-top: -2px;
  transition: transform var(--dur-micro) var(--ease-out);
}
.item input[type="checkbox"]:checked { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.item input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.item__body { display: grid; gap: var(--space-3xs); }
.item__name { font-weight: 500; }
.item__inc { font-size: var(--text-sm); color: var(--color-muted); }
.item__price { font-weight: 500; white-space: nowrap; text-align: right; padding-top: 0.05rem; }
.item__price small { font-weight: 400; font-size: var(--text-xs); color: var(--color-neutral); margin-left: 2px; }
.item.is-on { background: linear-gradient(90deg, var(--color-accent-bg), var(--color-paper) 85%); }
.item.is-included .item__price { color: var(--color-accent-2); font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) { .item:hover { background-color: var(--color-paper-2); } }

.qty { display: inline-flex; align-items: center; gap: 0; margin-top: var(--space-2xs); }
.qty__btn {
  width: 44px; height: 40px; border: var(--rule-hair); background: var(--color-paper); color: var(--color-ink);
  font: 500 var(--text-md)/1 var(--font-body); cursor: pointer;
}
.qty__btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.qty__btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.qty__in {
  width: 3.25rem; height: 40px; border: var(--rule-hair); border-inline: 0; text-align: center;
  font: 500 var(--text-base) var(--font-body); background: var(--color-paper); color: var(--color-ink);
  -moz-appearance: textfield;
}
.qty__in::-webkit-inner-spin-button, .qty__in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty.is-off { opacity: .5; }

.total {
  margin-top: var(--space-xl); padding: var(--space-lg); border: var(--rule-ink); border-radius: var(--radius-md);
  background: var(--color-paper); display: grid; gap: var(--space-md);
}
.total__row { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-2xs) 0; }
.total__row dt { color: var(--color-muted); }
.total__row dd { font-weight: 500; }
.total__row[hidden] { display: none; }
.total__row--save dd { color: var(--color-accent-2); }
.total__row--gross { border-top: var(--rule-hair); padding-top: var(--space-xs); margin-top: var(--space-2xs); }
.total__row--gross dd { font-size: var(--text-lg); font-family: var(--font-display); }
.total__note { font-size: var(--text-sm); color: var(--color-neutral); }
.total__cta { justify-self: start; }
@media (min-width: 60rem) {
  .menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: var(--space-2xl); align-items: start; }
  .menu__head, .bundles { grid-column: 1 / -1; }
  .carte { grid-column: 1; }
  .total { grid-column: 2; grid-row: 3; position: sticky; top: var(--space-lg); margin-top: var(--space-2xl); }
}

/* ---------- the big one ---------- */
.bigone { display: grid; gap: var(--space-xl); border-top: var(--rule-hair); margin-top: var(--space-2xl); }
.bigone__text > p { color: var(--color-muted); max-width: 52ch; }
.ticks { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); max-width: 56ch; }
.ticks li { position: relative; padding-left: var(--space-lg); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .65em; width: .6rem; height: 1px; background: var(--color-accent); }
.bigone__price { padding: var(--space-lg) 0; border-top: var(--rule-ink); }
.bigone__from { font-family: var(--font-display); font-style: italic; color: var(--color-muted); font-size: var(--text-md); }
.bigone__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 6vw + 1rem, 5rem); line-height: 1; letter-spacing: -0.02em; }
.bigone__terms { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 34ch; }
@media (min-width: 60rem) {
  .bigone { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-3xl); align-items: end; padding-block: var(--space-3xl) !important; }
}

/* ---------- about ---------- */
.about { border-top: var(--rule-hair); }
.about p { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.5; max-width: 52ch; }

/* ---------- contact ---------- */
.contact { display: grid; gap: var(--space-xl); background: var(--color-paper-2); max-width: none !important; }
.contact__text p { color: var(--color-muted); max-width: 44ch; }
.contact__direct { margin-top: var(--space-lg); display: grid; gap: var(--space-xs); }
[data-placeholder] { color: var(--color-brass) !important; }
.form { display: grid; gap: var(--space-md); max-width: 34rem; }
.field { display: grid; gap: var(--space-2xs); }
.field__label { font-size: var(--text-sm); font-weight: 500; }
.field__opt { font-weight: 400; color: var(--color-neutral); }
.field input {
  min-height: 48px; padding: var(--space-xs) var(--space-sm); font: var(--text-base) var(--font-body);
  color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-neutral); border-radius: var(--radius-sm);
}
.field input::placeholder { color: var(--color-neutral); }
.field input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: var(--color-brass); }
.form__summary { font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm); border-left: 2px solid var(--color-accent); background: var(--color-paper); white-space: pre-line; }
.form__err { font-size: var(--text-sm); color: var(--color-ink); background: var(--color-brass-bg); padding: var(--space-xs) var(--space-sm); }
.form .btn { justify-self: start; }
.form__hint { font-size: var(--text-xs); color: var(--color-neutral); }
@media (min-width: 60rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: max(var(--page-gutter), calc((100% - 76rem) / 2 + var(--page-gutter))) !important; padding-block: var(--space-3xl) !important; }
}

.legal { max-width: 76rem; margin: var(--space-xl) auto 0; padding: 0 var(--page-gutter); font-size: var(--text-xs); color: var(--color-neutral); }
.legal sup { color: var(--color-accent-2); font-weight: 600; }

/* ---------- footer Ft2 ---------- */
.foot { max-width: 76rem; margin: var(--space-xl) auto 0; padding: var(--space-lg) var(--page-gutter); border-top: var(--rule-hair); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- sticky bar C4 ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) var(--page-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: var(--color-paper); border-top: var(--rule-ink);
  transform: translateY(0); transition: transform var(--dur-short) var(--ease-out);
}
.bar[hidden] { display: flex; transform: translateY(110%); visibility: hidden; transition: transform calc(var(--dur-short) * .75) var(--ease-in), visibility 0s linear var(--dur-short); }
.bar__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-xs); font-weight: 500; }
.bar__month { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
.bar__net { font-size: var(--text-xs); color: var(--color-neutral); font-weight: 400; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(10px); }
.js .reveal.is-on { animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-delay: 0ms !important; transition-duration: 150ms !important; }
  .js .reveal, .js .report__mark, .js .report__status { transform: none; }
}