/* Site Masir — une seule feuille pour l'accueil, le calculateur et les pages
   légales. Les couleurs sont celles de RunColors (Masir/DesignSystem/Theme.swift),
   clair et sombre. Aucune police ni ressource d'un autre domaine. */

:root {
  --bg: #F5F7F4; --card: #FFFFFF; --ink: #101411; --muted: #6B726D; --body2: #5E6661;
  --accent: #1B563D; --accent-deep: #1B563D; --soft: #E6EFEA; --soft2: #D3E3DA;
  --accent-ink: #3F5A47; --easy: #A8D5B5;
  --track: #E8ECE8; --idle: #D9DED9; --outline: #E3E7E3; --hairline: rgba(16, 20, 17, .1);
  --cta-bg: #1B563D; --cta-fg: #FFFFFF;
  --night: #101411; --night-ink: #F2F5F2; --night-muted: #A3ABA5; --night-line: rgba(255, 255, 255, .14);
  --warn: #B4570F; --warn-bg: #FBEBDD;
  --frame: #101411;

  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-card: 22px; --r-large: 28px; --gutter: 20px; --page: 1120px;
  --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0D0C; --card: #171A18; --ink: #F2F5F2; --muted: #A3ABA5; --body2: #9AA29C;
    --accent: #2A7D58; --accent-deep: #86AA94; --soft: #15231C; --soft2: #1F3329; --accent-ink: #A7C9B1; --easy: #24503A;
    --track: #2A2F2B; --idle: #3A403C; --outline: #2A2F2B; --hairline: rgba(255, 255, 255, .1);
    --cta-bg: #2A7D58; --cta-fg: #FFFFFF;
    --night: #171A18;
    --warn: #F5A35C; --warn-bg: #3A2412;
    --frame: #2A2F2B;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; accent-color: var(--accent-deep); caret-color: var(--accent-deep);
}
::selection { background: var(--soft2); color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7.2vw + .6rem, 4.75rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.num { font-family: var(--round); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }

.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: 10; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ——— Barre du haut ——— */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s4); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.top-links { display: flex; align-items: center; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.top-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; font-size: .9375rem; font-weight: 600; color: var(--body2); }
.top-links a:hover { color: var(--ink); background: var(--track); }
.top-links a[aria-current="page"] { color: var(--ink); }
.top-links .get, .top-links .wide { display: none; }
.top-links a { white-space: nowrap; }

/* ——— Boutons ——— */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--cta-bg); color: var(--cta-fg);
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none;
  transition: transform .15s var(--out), filter .15s var(--out);
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: scale(.98); }
.cta svg { flex: none; }
.ghost {
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--idle); background: var(--card); font-weight: 600; text-decoration: none;
  transition: border-color .15s var(--out);
}
.ghost:hover { border-color: var(--ink); }
.ghost svg { transition: transform .2s var(--out); }
.ghost:hover svg { transform: translateX(3px); }

/* ——— Ouverture ——— */
.hero { padding-block: var(--s6) var(--s7); }
.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: var(--s5); max-width: 34rem; font-size: 1.1875rem; line-height: 1.45; color: var(--body2); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.hero .fine { font-size: .9375rem; color: var(--muted); }

/* ——— Le moteur au travail ——— */
.demo { background: var(--soft); padding-block: var(--s7) var(--s8); }
.demo h2 { max-width: 16ch; }
.demo-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); font-size: 1.1875rem; font-weight: 600; }
.demo-form label, .demo-form .word { color: var(--accent-ink); }
.field {
  appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 16px; background: var(--card); color: var(--ink);
  font: inherit; font-family: var(--round); font-weight: 800; font-size: 1.375rem; min-height: 56px; padding: 0 16px;
  box-shadow: 0 0 0 1px var(--hairline);
}
.field:hover { border-color: var(--accent); }
.field::placeholder { color: var(--muted); opacity: 1; }
select.field { padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236B726D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.clock { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.clock input { width: 3.1em; text-align: center; padding: 0 4px; -moz-appearance: textfield; }
.clock input::-webkit-outer-spin-button, .clock input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clock .u { color: var(--accent-ink); font-size: 1rem; margin-right: 6px; }
.demo-error { margin-top: var(--s4); color: var(--warn); font-weight: 600; }

.paces { display: grid; gap: var(--s5); margin: var(--s7) 0 0; }
.paces > div { display: grid; gap: 2px; }
.paces dt { font-size: 1.0625rem; font-weight: 700; color: var(--accent-ink); }
.paces dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.paces .num { font-size: clamp(2.75rem, 11.5vw, 5rem); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.paces .per { font-family: var(--round); font-weight: 700; font-size: 1.25rem; color: var(--accent-ink); }
.paces .why { font-size: .9375rem; color: var(--accent-ink); }
.paces .num.tick { animation: tick .35s var(--out); }
@keyframes tick { from { opacity: .35; transform: translateY(6px); } }
.demo-foot { margin-top: var(--s7); display: grid; gap: var(--s5); max-width: 38rem; }
.demo-foot p { color: var(--accent-ink); }

/* ——— Sections ——— */
.section { padding-block: var(--s8); }
.section.follows { padding-top: 0; }
.section > .wrap > h2 { max-width: 18ch; }
.section .intro { margin-top: var(--s4); max-width: 36rem; color: var(--body2); font-size: 1.125rem; }

/* ——— Le tour de l'app ——— */
.phone { margin: 0; border: 7px solid var(--frame); border-radius: 38px; overflow: hidden; background: var(--frame); aspect-ratio: 660 / 1435; }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.steps { list-style: none; margin: var(--s6) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) var(--s4);
  display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--idle) transparent; }
.step { flex: none; width: min(74vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s4); }
.step h3 { margin-top: var(--s2); }
.step p { color: var(--body2); font-size: 1rem; }
.tag { display: inline-block; align-self: flex-start; font-size: .8125rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--soft2); color: var(--accent-ink); }
.stage { display: none; }

/* ——— Gratuit et payant ——— */
.offer { display: grid; margin-top: var(--s6); background: var(--card); border-radius: var(--r-large); box-shadow: 0 0 0 1px var(--hairline); overflow: hidden; }
.offer > div { padding: var(--s5); }
.offer .plus { background: var(--soft); }
.offer h3 { font-size: 1.5rem; }
.offer .sub { margin-top: 4px; color: var(--body2); font-size: 1rem; }
.offer .plus .sub { color: var(--accent-ink); }
.offer ul { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.offer li { position: relative; padding-left: 30px; }
.offer li::before { content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.2 9.3 2.6 2.6 5-5.4'/%3E%3C/svg%3E") center / 18px no-repeat; }
.price { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--hairline); }
.price .trial { font-weight: 600; }
.price .amount { margin-top: 2px; font-weight: 600; }
.price .num { font-size: 1.75rem; white-space: nowrap; }
.price .terms { margin-top: var(--s4); font-size: .9375rem; color: var(--accent-ink); }
.offer .free-cta { margin-top: var(--s5); }

/* ——— Confidentialité ——— */
.night { background: var(--night); color: var(--night-ink); }
.night ::selection { background: var(--accent); color: #FFFFFF; }
.night .intro { color: var(--night-muted); }
.night :focus-visible { outline-color: #86AA94; }
.nots { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; }
.nots li { padding-block: var(--s4); border-top: 1px solid var(--night-line); font-size: clamp(1.375rem, 3.4vw + .6rem, 2.25rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
.nots li:last-child { border-bottom: 1px solid var(--night-line); }
.night .after { margin-top: var(--s6); display: grid; gap: var(--s4); max-width: 38rem; color: var(--night-muted); }
.night .after a { color: var(--night-ink); }

/* ——— Calculateur, contact, clôture ——— */
.tool { display: grid; gap: var(--s5); }
.tool .ghost { justify-self: start; }
.close { display: grid; gap: var(--s6); align-items: center; }
.close .phone { max-width: 250px; }
.close ol { margin: var(--s5) 0 var(--s6); padding: 0 0 0 1.3em; display: grid; gap: var(--s2); color: var(--body2); }
.close ol ::marker { font-family: var(--round); font-weight: 800; color: var(--ink); }
.help { border-top: 1px solid var(--hairline); padding-block: var(--s7); }
.help-grid { display: grid; gap: var(--s6); }
.help h2 { font-size: 1.3125rem; letter-spacing: -.015em; line-height: 1.2; font-weight: 700; }
.help p { margin-top: var(--s2); color: var(--body2); font-size: 1rem; max-width: 34rem; }

.foot { border-top: 1px solid var(--hairline); padding-block: var(--s6) var(--s7); font-size: .9375rem; color: var(--muted); }
.foot ul { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration-color: transparent; }
.foot ul a:hover { text-decoration-color: var(--accent); }

/* ——— Calculateur (allures.html, pace.html) ——— */
.calc { max-width: 600px; margin: 0 auto; padding: 0 var(--gutter) var(--s8); }
.calc h1 { font-size: clamp(2.125rem, 6vw + .6rem, 3.25rem); margin-top: var(--s5); }
.calc .lead { margin: var(--s4) 0 var(--s6); color: var(--body2); font-size: 1.125rem; }
.calc h2 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.15; margin: var(--s7) 0 var(--s4); }
.free { display: inline-block; font-size: .8125rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--soft2); color: var(--accent-ink); vertical-align: middle; }
.card { background: var(--card); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--hairline); padding: 18px; margin: 0 0 var(--s3); }
.card.soft { background: var(--soft); box-shadow: none; }
.label { font-size: .875rem; font-weight: 600; color: var(--muted); margin: 0 0 var(--s2); }
.gap { margin-top: 18px; }

.pills { display: flex; gap: 6px; }
.pill { appearance: none; border: 1px solid var(--idle); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 1rem;
  padding: 10px 6px; flex: 1; white-space: nowrap; min-height: 48px; border-radius: 999px; cursor: pointer; transition: background-color .15s var(--out), border-color .15s var(--out); }
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: #FFFFFF; }

.time { display: flex; align-items: flex-end; gap: 6px; }
.time label { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; font-size: .8125rem; color: var(--muted); }
.time input { width: 100%; text-align: center; border: 1px solid transparent; border-radius: 16px; background: var(--bg); color: var(--ink); font-size: 2.125rem; padding: 10px 0; -moz-appearance: textfield; }
.time input:hover { border-color: var(--idle); }
.time input::placeholder { color: var(--muted); }
.time input::-webkit-outer-spin-button, .time input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.time .sep { font-size: 1.875rem; color: var(--muted); padding-bottom: 30px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }
.row .label { margin: 0; }
.seg { display: inline-flex; background: var(--track); border-radius: 999px; padding: 3px; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--body2); font: inherit; font-size: .9375rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; min-height: 44px; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline); }
.error { color: var(--warn); background: var(--warn-bg); font-size: .9375rem; font-weight: 600; margin: var(--s4) 0 0; padding: 10px 14px; border-radius: 12px; }

.form { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.form .label { color: var(--accent-ink); margin: 0; }
.form .big { font-size: 3.5rem; line-height: 1; letter-spacing: -.03em; }
.form .side { max-width: 55%; text-align: right; color: var(--accent-ink); font-size: .875rem; }

.zone { display: flex; align-items: center; gap: var(--s3); padding: 13px 0; border-top: 1px solid var(--hairline); }
.zone:first-of-type { border-top: 0; padding-top: 2px; }
.zone:last-of-type { padding-bottom: 2px; }
.badge { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--soft2); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--round); font-weight: 800; font-size: .9375rem; }
.zone .what { flex: 1; min-width: 0; }
.zone .name { font-weight: 700; }
.zone .why { color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.zone .pace { text-align: right; flex: none; }
.zone .pace .v { font-size: 1.125rem; white-space: nowrap; }
.zone .pace .u { font-size: .75rem; color: var(--muted); }
.dots { display: flex; gap: 3px; margin-top: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; border: 1.2px solid var(--accent); }
.dots i.on { background: var(--accent); }

.bars { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin: 4px 0 8px; }
.bars span { flex: 1; border-radius: 6px; background: var(--accent); min-height: 8px; transition: height .4s var(--out); }
.bars span.easy { background: var(--easy); }
.bars-legend { display: flex; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--muted); }
.bars-legend span { flex: 1; text-align: center; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tile { background: var(--card); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--hairline); padding: 16px; }
.tile .k { font-size: .875rem; font-weight: 600; color: var(--muted); }
.tile .v { font-size: 1.625rem; }
.tile .s { font-size: .75rem; color: var(--muted); }
.tile.ref { background: var(--soft); box-shadow: none; }
.tile.ref .k, .tile.ref .s { color: var(--accent-ink); }

.promo { margin-top: var(--s7); padding: var(--s5); background: var(--soft); box-shadow: none; }
.promo h2 { margin: 0 0 var(--s3); }
.promo p { color: var(--accent-ink); margin: 0 0 var(--s5); }
.promo .cta { width: 100%; }
.promo .small { font-size: .875rem; text-align: center; margin: var(--s3) 0 0; }

.prose { margin-top: var(--s7); }
.prose h3 { font-size: 1.125rem; margin: var(--s5) 0 var(--s1); }
.prose p { color: var(--body2); font-size: 1rem; max-width: 65ch; }

/* ——— Pages légales : le texte ne change pas, seule sa mise en forme ——— */
.doc .wrap { max-width: 46rem; }
.doc #contenu { padding-bottom: var(--s8); }
.doc header { padding-block: var(--s5) var(--s6); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s6); }
.doc h1 { font-size: clamp(2.125rem, 5vw + .8rem, 3.25rem); }
.doc .lead { margin-top: var(--s3); color: var(--body2); font-size: 1.1875rem; }
.doc .meta { margin-top: var(--s3); color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.doc header .lang { display: none; }
.doc h2 { font-size: 1.625rem; letter-spacing: -.02em; line-height: 1.15; margin: var(--s7) 0 var(--s3); scroll-margin-top: var(--s5); }
.doc h3 { font-size: 1.1875rem; margin: var(--s6) 0 var(--s2); }
.doc p { margin: 0 0 var(--s4); }
.doc #contenu ul, .doc #contenu ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
.doc #contenu li { margin-bottom: var(--s2); }
.doc #contenu li::marker { color: var(--accent-deep); }
.doc .card { background: var(--soft); box-shadow: none; padding: var(--s5); margin: 0 0 var(--s6); }
.doc .card p:last-child { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s5); display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hairline); font-size: 1rem; }
.doc th { font-size: .875rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.doc td { font-variant-numeric: tabular-nums; }
.doc footer { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--hairline); color: var(--muted); font-size: .9375rem; }
.doc footer p { margin: 0; }

/* ——— Écrans très étroits : le calculateur reste dans la page et le pied ——— */
@media (max-width: 339px) {
  .top-links .tool { display: none; }
}

/* ——— Écrans larges ——— */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .top-links .wide { display: inline; }
  .top-links .get { display: inline-flex; color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--hairline); margin-left: var(--s2); padding: 0 16px; }
  .hero { padding-block: var(--s8) var(--s8); }
  .demo { padding-block: var(--s8) var(--s9); }
  .paces .num { font-size: 4.5rem; }
  .section { padding-block: var(--s9); }
  .section.follows { padding-top: 0; }
  .offer { grid-template-columns: 1fr 1.15fr; }
  .offer > div { padding: var(--s7); }
  .close { grid-template-columns: 1fr 250px; gap: var(--s8); }
  .help-grid { grid-template-columns: 1fr 1fr 1fr; }
  .tool { grid-template-columns: 1fr auto; align-items: end; }
  .tool .ghost { justify-self: end; }
}

@media (min-width: 1024px) {
  /* Le moteur rejoint le titre dans le premier écran. */
  .opening { display: grid; grid-template-columns: 1fr minmax(0, 472px); gap: var(--s8); align-items: start;
    max-width: var(--page); margin: 0 auto; padding: var(--s7) var(--gutter) var(--s8); }
  .opening .hero { padding: var(--s5) 0 0; }
  .opening .demo { border-radius: var(--r-large); padding: var(--s6); }
  .opening .demo .wrap { padding: 0; }
  .opening .demo h2 { font-size: 1.625rem; letter-spacing: -.025em; }
  .opening .demo-form { margin-top: var(--s5); font-size: 1.0625rem; }
  .opening .paces { gap: var(--s4); margin-top: var(--s6); }
  .opening .paces .num { font-size: 3.25rem; }
  .opening .demo-foot { margin-top: var(--s6); gap: var(--s4); font-size: 1rem; }
}

@media (min-width: 960px) {
  /* Sans script : cinq rangées, capture à gauche. Avec script : le téléphone
     reste en place et change d'écran quand le texte défile. */
  .steps { margin-inline: 0; padding: 0; display: grid; gap: var(--s8); overflow: visible; }
  .step { width: auto; display: grid; grid-template-columns: 280px 1fr; gap: var(--s8); align-items: center; }
  .step .copy { max-width: 30rem; }
  .step h3 { font-size: 2rem; letter-spacing: -.025em; line-height: 1.1; }
  .step p { font-size: 1.125rem; margin-top: var(--s4); }
  .step .tag { margin-top: var(--s4); }

  .js .tour-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--s9); align-items: start; margin-top: var(--s7); }
  .js .stage { display: block; position: sticky; top: calc(50vh - 326px); }
  .js .stage .phone { position: relative; }
  .js .stage img { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px);
    transition: opacity .45s var(--out), transform .45s var(--out), filter .45s var(--out); }
  .js .stage img.on { opacity: 1; transform: none; filter: none; }
  .js .steps { margin-top: 0; gap: 0; padding-block: 12vh; }
  .js .step { min-height: 62vh; align-content: center; grid-template-columns: 1fr; }
  .js .step .phone { display: none; }
  .js .step .copy { color: var(--muted); transition: color .3s var(--out); }
  .js .step .copy p { color: inherit; }
  .js .step.on .copy { color: var(--ink); }
  .js .step.on .copy p { color: var(--body2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .stage img { transform: none; filter: none; }
}

@media print {
  .top, .skip, .foot ul { display: none; }
  body { background: #fff; color: #000; }
}