/* ============================================================================
   Recyclage St-Mathieu: site stylesheet
   Tokens first (brand from the logo), then chrome, then each plate in page
   order. scrollcraft.css supplies the floor and the device mechanics.
   ========================================================================== */

/* ------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas: #1F1F1F;
  --sc-surface: #272727;
  --sc-ink: #F5F2EC;
  --sc-ink-soft: #ABA79F;
  --sc-accent: #FEC127;
  --sc-accent-ink: #1F1F1F;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-shadow-color: 40 8% 4%;
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 16px;

  --yellow: #FEC127;
  --yellow-hover: #FFCF57;
  --paper: #F6F2EA;
  --ink-on-light: #1F1F1F;
  --soft-on-paper: #5C5851;
  --soft-on-yellow: #4A3D10;
  --surface-2: #313131;
  --line: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* illustration recolour hooks (see tools/svgopt.mjs --vars) */
  --il-ink: #1F1F1F;
  --il-paper: #FFFFFF;
  --il-accent: #FEC127;
  --il-soft: #B9B4AB;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nav-h: 56px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 82rem;

  /* Tailwind scale endpoints, fluid between them */
  --t-xs: 0.75rem;   --lh-xs: 1rem;
  --t-sm: 0.875rem;  --lh-sm: 1.25rem;
  --t-base: 1rem;    --lh-base: 1.5rem;
  --t-lg: 1.125rem;  --lh-lg: 1.75rem;
  --t-xl: 1.25rem;   --lh-xl: 1.75rem;
  --t-2xl: 1.5rem;   --lh-2xl: 2rem;
  --t-3xl: 1.875rem; --lh-3xl: 2.25rem;
  --t-4xl: 2.25rem;  --lh-4xl: 2.5rem;
  --t-5xl: 3rem;
  --t-6xl: 3.75rem;
  --t-7xl: 4.5rem;
  --t-8xl: 6rem;
  --t-9xl: 8rem;

  --d-xl: clamp(var(--t-5xl), 1rem + 5vw, 5.5rem);            /* 48 -> 88 */
  --d-lg: clamp(var(--t-4xl), 1.2rem + 3.4vw, var(--t-7xl));   /* 36 -> 72 */
  --d-md: clamp(var(--t-3xl), 1.3rem + 1.8vw, var(--t-5xl));   /* 30 -> 48 */
  --d-sm: clamp(var(--t-2xl), 1.2rem + 0.9vw, var(--t-3xl));   /* 24 -> 30 */
  --d-tag: clamp(var(--t-3xl), 1rem + 2.9vw, 3.375rem);        /* 30 -> 54: three lines for a 110-120 character tagline up to 1920px */
  --body: clamp(var(--t-base), 0.95rem + 0.25vw, var(--t-lg)); /* 16 -> 18 */
  --lede: clamp(var(--t-lg), 1rem + 0.55vw, var(--t-2xl));     /* 18 -> 24 */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --section: clamp(var(--s-16), 7vw, var(--s-24));

  color-scheme: dark;
}

html { scroll-padding-top: calc(var(--nav-h) + 40px); }
body {
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  background: var(--sc-canvas);
}
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------- typography -- */
.d {
  font-family: var(--sc-font-display);
  font-stretch: 75%;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
.d--xl { font-size: var(--d-xl); }
.d--lg { font-size: var(--d-lg); }
.d--md { font-size: var(--d-md); line-height: 0.96; }
.d--sm { font-size: var(--d-sm); line-height: 1; }
.lede { font-size: var(--lede); line-height: 1.4; letter-spacing: -0.01em; text-wrap: pretty; margin: 0; max-width: 46ch; }
.body { max-width: 62ch; text-wrap: pretty; margin: 0; color: var(--sc-ink-soft); }
.label {
  font-size: var(--t-xs); line-height: var(--lh-xs);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--sc-ink-soft);
}
.small { font-size: var(--t-sm); line-height: var(--lh-sm); }
.u { /* the logo's yellow underline, as a heading detail */
  display: inline-block; position: relative;
}
.u::after {
  content: ""; position: absolute; left: 0.02em; right: -0.02em; bottom: -0.08em;
  height: 0.09em; background: var(--yellow); border-radius: 1px;
  transform: skewX(-12deg);
}
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.stack > :is(h1, h2, h3) + * { margin-top: var(--s-6); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  min-height: 44px;
  border-radius: 999px;
  background: var(--yellow); color: var(--ink-on-light);
  font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  box-shadow: var(--sc-e1);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { background: var(--yellow-hover); transform: translateY(-1px); box-shadow: var(--sc-e2); }
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: none; }
.btn--sm { font-size: var(--t-sm); line-height: var(--lh-sm); min-height: 40px; padding: var(--s-2) var(--s-3); }
.btn--sm svg { width: 18px; height: 18px; }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); box-shadow: none; }
.btn--dark { background: var(--ink-on-light); color: #F5F2EC; }
.btn--dark svg { color: var(--yellow); }
.btn--dark:hover { background: #333; }
.btn--lg { font-size: var(--t-lg); line-height: var(--lh-lg); min-height: 48px; padding: var(--s-3) var(--s-6) var(--s-3) var(--s-4); }
.btn--lg svg { width: 22px; height: 22px; }
.link {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: inherit; font-weight: 600; text-decoration: none;
  text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}
.link:hover { text-decoration: underline; }
.link svg { width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
.link:hover svg { transform: translateX(3px); }
.skip {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 100;
  padding: var(--s-2) var(--s-3); background: var(--yellow); color: var(--ink-on-light);
  border-radius: 999px; font-weight: 600; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* -------------------------------------------------- floating island nav -- */
.isl {
  position: fixed; top: var(--s-6); left: 50%; translate: -50% 0; z-index: 70;
  display: flex; align-items: center; gap: var(--s-1);
  height: var(--nav-h); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: 999px;
  background: color-mix(in oklab, var(--sc-canvas) 74%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--line);
  box-shadow: var(--sc-e1);
  width: max-content; max-width: calc(100vw - 2 * var(--s-4));
  transition: transform 700ms var(--ease), background-color 700ms var(--ease);
}
.isl__logo { display: flex; align-items: center; margin-right: var(--s-3); }
.isl__logo img { height: 26px; width: auto; display: block; }
.isl__links { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.isl__links a {
  display: block; padding: var(--s-2) var(--s-3); border-radius: 999px;
  font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--sc-ink-soft);
  text-decoration: none; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.isl__links a:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.isl__links a[aria-current] { color: var(--sc-ink); }
.isl__links a[aria-current]::after {
  content: ""; display: block; width: 14px; height: 2px; margin: 2px auto 0; background: var(--yellow); border-radius: 1px;
}
.isl__lang {
  padding: var(--s-2) var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600;
  color: var(--sc-ink-soft); text-decoration: none; border-radius: 999px; margin-left: var(--s-1);
}
.isl__lang:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.isl__cta { margin-left: var(--s-2); }
.isl__cta .cta-txt { display: inline; }
.burger {
  display: none; position: relative; width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 0; cursor: pointer; margin-left: var(--s-1);
}
.burger span {
  position: absolute; left: 13px; width: 18px; height: 2px; background: var(--sc-ink); border-radius: 1px;
  transition: transform 420ms var(--ease), top 420ms var(--ease), width 420ms var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; width: 12px; }
.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: scaleX(0); }
.menu-open .burger span:nth-child(3) { top: 21px; width: 18px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 65; display: grid; place-items: center;
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s linear 700ms;
}
.menu-open .menu { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease); }
.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu li { overflow: hidden; }
.menu a {
  display: block; padding: var(--s-2) var(--s-6); text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase;
  font-size: var(--d-md); line-height: 1.1;
  transform: translateY(48px); opacity: 0;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
.menu li:nth-child(1) a { transition-delay: 100ms; }
.menu li:nth-child(2) a { transition-delay: 150ms; }
.menu li:nth-child(3) a { transition-delay: 200ms; }
.menu li:nth-child(4) a { transition-delay: 250ms; }
.menu li:nth-child(5) a { transition-delay: 300ms; }
.menu li:nth-child(6) a { transition-delay: 350ms; }
.menu li:nth-child(7) a { transition-delay: 400ms; }
.menu-open .menu a { transform: none; opacity: 1; }
.menu .menu__phone { font-family: var(--sc-font-text); font-stretch: 100%; text-transform: none; font-size: var(--t-xl); color: var(--yellow); margin-top: var(--s-6); }
.menu .menu__lang { font-family: var(--sc-font-text); font-stretch: 100%; text-transform: none; font-size: var(--t-base); color: var(--sc-ink-soft); font-weight: 500; }

@media (max-width: 980px) {
  .isl__links, .isl__lang { display: none; }
  .burger { display: block; }
  .isl { padding-left: var(--s-3); }
  .isl__cta .cta-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .isl__cta { padding: 0; width: 44px; min-height: 44px; justify-content: center; }
}

/* ------------------------------------------------------- reveal on entry -- */
.js .rv, .js .rv-group > * {
  opacity: 0; transform: translate3d(0, 48px, 0); filter: blur(6px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
}
.js .rv.in, .js .rv-group.in > * { opacity: 1; transform: none; filter: none; }
.rv-group.in > :nth-child(2) { transition-delay: 70ms; }
.rv-group.in > :nth-child(3) { transition-delay: 140ms; }
.rv-group.in > :nth-child(4) { transition-delay: 210ms; }
.rv-group.in > :nth-child(5) { transition-delay: 280ms; }
.rv-group.in > :nth-child(6) { transition-delay: 350ms; }
.rv-group.in > :nth-child(7) { transition-delay: 420ms; }
.rv-group.in > :nth-child(8) { transition-delay: 490ms; }

/* ----------------------------------------------------------- illustrations -- */
.il { display: block; width: 100%; height: auto; }
.il svg { display: block; width: 100%; height: auto; }

/* ================================================================= HERO == */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + var(--s-6) + var(--s-16));
  padding-bottom: var(--s-16);
  display: grid; align-items: center;
}
.hero__yard {
  position: absolute; left: 50%; bottom: -1%; translate: -50% 0; width: max(112%, 1500px); z-index: 0;
  --il-ink: #4A4845; --il-paper: var(--sc-canvas); --il-accent: #6a5a2a; --il-soft: #3a3835;
  opacity: 0.9; pointer-events: none;
}
.hero__yard svg { width: 100%; height: auto; display: block; }
.hero__yard { -webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 100%); }
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-12); align-items: center;
}
.hero__copy { display: grid; gap: var(--s-6); max-width: 680px; }
.hero__copy h1 { max-width: none; }
.hero__copy .lede { max-width: 680px; color: var(--sc-ink); font-weight: 400; }
.hero__copy .lede span { color: var(--sc-ink-soft); }
.hero__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.hero--404 .hero__ctas { flex-direction: row; flex-wrap: wrap; align-items: center; }
.btn--call { gap: var(--s-2); padding-left: var(--s-4); }
.btn--call__k { font-weight: 600; }

.btn--call__n { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.hero__under { margin: 0; font-size: var(--t-base); line-height: var(--lh-base); color: var(--sc-ink); max-width: 46ch; text-wrap: pretty; }
.stack__intro { max-width: 62ch; margin-top: var(--s-3); }
.brands__note { margin-top: var(--s-3); }
.zone__note { margin: var(--s-4) 0 var(--s-3); color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
/* Pourquoi choisir St-Mathieu */
.why { padding: var(--s-16) 0 var(--s-8); }
.why__grid { display: grid; gap: var(--s-10); align-items: start; }
@media (min-width: 900px) { .why__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); } .why__lead { position: sticky; top: calc(var(--s-16) + 24px); } }
.why__lead { display: grid; gap: var(--s-4); justify-items: start; }
.why__intro { max-width: 52ch; }
.why__quote { margin: var(--s-2) 0 0; padding: var(--s-4) var(--s-6); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: var(--s-3); max-width: 46ch; }
.why__quote blockquote { margin: 0; font-size: var(--t-lg); line-height: var(--lh-lg); letter-spacing: -0.01em; text-wrap: pretty; }
.why__quote blockquote::before { content: "« "; } .why__quote blockquote::after { content: " »"; }
:lang(en) .why__quote blockquote::before { content: "“"; } :lang(en) .why__quote blockquote::after { content: "”"; }
.why__quote figcaption { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); font-weight: 600; }
.why__list { list-style: none; margin: 0; padding: 0; display: grid; }
.why__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.why__item:last-child { border-bottom: 1px solid var(--line); }
.why__item h3 { margin: 0 0 var(--s-2); }
.why__item p { margin: 0; color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }
.why__ico { width: 56px; height: 56px; border-radius: 999px; background: var(--yellow); color: var(--ink-on-light); display: grid; place-items: center; flex: none; }
.why__ico svg { width: 26px; height: 26px; }
.why .members { margin-top: var(--s-12); }
@media (max-width: 599px) { .why { padding-top: var(--s-12); } .why__item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); } .why__ico { width: 44px; height: 44px; } .why__ico svg { width: 22px; height: 22px; } }
.fly--card b { display: block; margin-bottom: 4px; }
.fly--card small { display: block; color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
.metals-sec .parts__foot { justify-content: center; }
.hero .label { max-width: none; }
@media (max-width: 599px) { .fly--card small { display: none; } .fly--card b { margin-bottom: 0; } }
.hero__hours { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); }
.hero__hours__state { color: var(--sc-ink); font-weight: 600; }
.hero__hours__state:not([hidden]) + span { margin-left: var(--s-2); }
.hero__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sc-ink-soft); flex: none; }
.hero__hours.is-open .hero__dot { background: #2E9D5B; box-shadow: 0 0 0 3px color-mix(in oklab, #2E9D5B 25%, transparent); }
.btn--call__ks { display: none; font-weight: 600; }

@media (max-width: 480px) {
  .btn--call__k { display: none; }
  .btn--call__ks { display: inline; }
  .hero__hours { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-2); row-gap: var(--s-1); }
  .hero__hours__state:not([hidden]) + span { grid-column: 2; }
  .hero__hours__state:not([hidden]) + span::before { content: none; }
}
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
.hero__proof li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__proof svg { width: 16px; height: 16px; color: var(--yellow); }
.hero__art { position: relative; --mx: 0; --my: 0; }
.hero__illo {
  --il-ink: #F5F2EC; --il-paper: var(--sc-canvas); --il-soft: #7a766f;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0);
  will-change: transform;
}
.fc {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: 16px;
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid transparent;
  box-shadow: var(--sc-e3), var(--sc-edge);
  will-change: transform;
  transform: translate3d(calc(var(--mx) * var(--depth)), calc(var(--my) * var(--depth)), 0);
}
.fc__ico { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--yellow); color: var(--ink-on-light); flex: none; }
.fc__ico svg { width: 20px; height: 20px; }
.fc > span:last-child { display: grid; }
.fc__t { font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); }
.fc__s { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sc-ink-soft); margin-top: 2px; }
.fc--1 { top: 4%; left: -6%; --depth: 22px; }
.fc--2 { right: -6%; top: 14%; --depth: 34px; }
.fc--3 { left: 6%; bottom: -3%; --depth: 16px; }
.hero__blob {
  position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background: var(--yellow); opacity: 0.06; left: 22%; top: 8%; filter: blur(2px);
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0);
}
@media (max-width: 980px) {
  .hero { padding-top: calc(var(--nav-h) + var(--s-6) + var(--s-10)); min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .hero__art { margin-inline: var(--s-4); }
  .fc { padding: var(--s-2) var(--s-3); border-radius: 12px; }
  .fc__ico { width: 30px; height: 30px; }
  .fc__ico svg { width: 16px; height: 16px; }
  .fc__s { display: none; }
  .fc--1 { top: -4%; left: -2%; }
  .fc--2 { right: -2%; top: 10%; }
  .fc--3 { left: 2%; bottom: -4%; }
  .hero__yard { width: max(200%, 1100px); opacity: 0.6; }
}
@media (max-width: 480px) {
  .hero__copy h1 { font-size: var(--t-5xl); }
}

/* ============================================================== TAGLINE == */
.tag { padding-block: var(--section); }
.tag p {
  margin: 0 auto; max-width: 980px; text-align: center;
  font-family: var(--sc-font-display); font-size: var(--d-tag); line-height: 1.12; font-weight: 600;
  letter-spacing: -0.02em; text-wrap: balance;
}
.js .tag .w {
  display: inline-block; color: color-mix(in oklab, var(--sc-ink) 28%, transparent);
  transition: color 700ms var(--ease);
  transition-delay: calc(var(--k, 0) * 45ms);
}
.js .tag .w.on { color: var(--sc-ink); }
.tag .w.on.acc { color: var(--yellow); }

/* ============================================================== PLATES == */
.stack { position: relative; padding-top: var(--s-8); }
.stack__head { display: grid; gap: var(--s-4); padding-bottom: var(--s-12); }
.plate {
  position: sticky; top: calc(var(--nav-h) + var(--s-8));
  min-height: calc(100svh - var(--nav-h) - var(--s-8) - var(--s-6));
  width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter));
  margin-inline: auto;
  border-radius: 24px;
  padding: clamp(var(--s-8), 4vw, var(--s-12)) clamp(var(--s-6), 4vw, var(--s-16));
  display: grid; align-items: center;
  transform-origin: 50% 0;
  transform: scale(calc(1 - 0.05 * var(--cover, 0))) translateY(calc(var(--cover, 0) * -10px));
  box-shadow: var(--sc-e3), var(--sc-edge);
  isolation: isolate; overflow: clip;
  --cover: 0;
}
.plate + .plate { margin-top: var(--s-6); }
.plate::after {
  content: ""; position: absolute; inset: 0; background: #000; pointer-events: none;
  opacity: calc(var(--cover, 0) * 0.42); transition: none;
}
.plate--yellow { background: var(--yellow); color: var(--ink-on-light); --sc-ink: #1F1F1F; --sc-ink-soft: var(--soft-on-yellow); --line: rgba(31,31,31,0.14); --il-accent: #FFFFFF; --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #6f5f30; }
.plate--dark { background: var(--surface-2); color: var(--sc-ink); --il-ink: #F5F2EC; --il-paper: var(--surface-2); --il-soft: #8a857d; }
.plate--paper { background: var(--paper); color: var(--ink-on-light); --sc-ink: #1F1F1F; --sc-ink-soft: var(--soft-on-paper); --line: rgba(31,31,31,0.12); --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #b9b4ab; }
.plate__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--s-8), 5vw, var(--s-20)); align-items: center; width: 100%; }
.plate__copy { display: grid; gap: var(--s-6); }
.plate__num { display: inline-flex; align-items: center; gap: var(--s-2); }
.plate__num::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 1px; }
.plate__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.plate__points li { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 500; }
.plate__points svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.plate--yellow .plate__points svg { color: var(--ink-on-light); }
.plate--dark .plate__points svg { color: var(--yellow); }
.plate--paper .plate__points svg { color: var(--ink-on-light); }
.plate__note { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); max-width: 58ch; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.plate__art { position: relative; }
.plate__art .il { max-width: 560px; margin-inline: auto; }
.plate__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.metals { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.metals span {
  padding: var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; letter-spacing: 0.02em;
}
.plate--dark .metals span { border-color: color-mix(in oklab, var(--yellow) 60%, transparent); color: var(--yellow); }
.art-duo { position: relative; max-width: 560px; margin-inline: auto; }
.art-duo .il--a { width: 78%; }
.art-duo .il--b { position: absolute; right: -2%; bottom: -8%; width: 44%; }
.stack__spacer { height: clamp(120px, 34svh, 50svh); }
@media (max-width: 980px) {
  .plate__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .plate__art { order: -1; }
  .plate__art .il { max-width: 420px; }
  .art-duo { max-width: 420px; }
}
@media (max-height: 860px) and (min-width: 861px) {
  .plate { padding-block: var(--s-8); }
  .plate__copy { gap: var(--s-4); }
  .plate__copy .d--lg { font-size: var(--d-md); }
}
@media (max-width: 860px), (max-height: 720px) {
  .plate { position: relative; top: auto; min-height: 0; border-radius: 24px; transform: none !important; }
  .plate + .plate { margin-top: var(--s-4); }
  .plate::after { display: none; }
  .stack__spacer { height: var(--s-10); }
}

/* ================================================== LE DÉMONTAGE (peak) == */
.dm { --il-ink: #F5F2EC; --il-paper: var(--sc-canvas); --il-soft: #7a766f; }
.dm__stage { display: grid; grid-template-rows: auto 1fr; height: 100svh; padding-top: calc(var(--nav-h) + var(--s-8)); padding-bottom: var(--s-6); }
.dm__head { text-align: center; display: grid; gap: var(--s-3); justify-items: center; padding-inline: var(--gutter); }
.dm__head .body { max-width: 60ch; color: var(--sc-ink-soft); }
.dm__box {
  position: relative; width: min(100% - 2 * var(--gutter), 1240px); margin: var(--s-4) auto 0;
  aspect-ratio: 16 / 8.6; max-height: 100%; align-self: center;
}
.dm__blob {
  position: absolute; left: 50%; top: 52%; width: 34%; aspect-ratio: 1.2; translate: -50% -50%;
  border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%; background: var(--yellow); opacity: 0.08;
  transform: scale(calc(0.85 + var(--dmp, 0) * 0.65)); will-change: transform;
}
.dm__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dm__lines line { stroke: var(--sc-ink-soft); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0; }
.dm__body { position: absolute; left: 50%; top: 52%; width: 46%; translate: -50% -50%; will-change: transform, opacity; }
.dm__body .il svg { width: 100%; height: auto; }
.part {
  position: absolute; left: 0; top: 0; width: 10%;
  translate: -50% -50%; will-change: transform, opacity; opacity: 0;
}
.part .il svg { width: 100%; height: auto; }
.tag-l {
  position: absolute; z-index: 3; opacity: 0; will-change: transform, opacity;
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: var(--s-1) var(--s-3); border-radius: 8px; background: var(--yellow); color: var(--ink-on-light);
  font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap;
  box-shadow: var(--sc-e2);
}
.tag-l small { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--soft-on-yellow); }
.tag-l::before {
  content: ""; position: absolute; width: 8px; height: 8px; background: var(--yellow); border-radius: 50%;
  top: 50%; translate: 0 -50%;
}
.tag-l--l::before { right: -12px; }
.tag-l--r::before { left: -12px; }
.tag-l--t::before, .tag-l--b::before { display: none; }
.dm__end {
  position: absolute; left: 50%; top: 50%; z-index: 4; opacity: 0; width: min(90%, 720px);
  display: grid; justify-items: center; gap: var(--s-3); text-align: center; pointer-events: none;
}
.dm__end svg { width: 48px; height: 48px; color: var(--yellow); }
.dm__end p { margin: 0; font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: var(--d-md); line-height: 1; }
.dm__body--out { opacity: 0.12; }
@media (max-width: 860px) {
  .dm__stage { padding-top: calc(var(--nav-h) + var(--s-8)); }
  .dm__box { aspect-ratio: 3 / 4.2; width: min(100% - 2 * var(--s-4), 520px); }
  .dm__body { width: 82%; }
  .tag-l { font-size: var(--t-xs); line-height: var(--lh-xs); padding: 2px var(--s-2); border-radius: 6px; }
  .tag-l small { display: none; }
  .dm__end p { font-size: var(--t-2xl); }
  .dm__end svg { width: 36px; height: 36px; }
}

/* ================================================================ STEPS == */
.steps { --il-ink: #F5F2EC; --il-paper: var(--sc-surface); --il-soft: #7a766f; }
.rail { display: flex; align-items: center; gap: var(--s-6); height: 100svh; padding-inline: var(--gutter); padding-top: var(--nav-h); }
.rail > * { flex: none; }
.rail__lead { width: clamp(18rem, 30vw, 28rem); display: grid; gap: var(--s-6); margin-right: var(--s-6); }
.step {
  width: calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - 2 * var(--s-6)) / 3);
  min-width: 18rem;
  background: var(--sc-surface); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--s-6); display: grid; gap: var(--s-4);
}
.step__art { border-radius: 8px; overflow: hidden; background: var(--sc-surface); }
.step__art .il { max-width: 260px; margin-inline: auto; }
.step__num { color: var(--yellow); }
.step p { margin: 0; color: var(--sc-ink-soft); }
.rail__tail { width: clamp(18rem, 26vw, 24rem); display: grid; gap: var(--s-3); margin-left: var(--s-6); padding: var(--s-6); border-left: 1px solid var(--line); }
.rail__tail p { margin: 0; color: var(--sc-ink-soft); }
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .step { opacity: clamp(0.55, calc((var(--sc-p, 0) - var(--t)) * 6 + 0.55), 1); transform: translateY(clamp(0px, calc((var(--t) - var(--sc-p, 0)) * 240px), 40px)); }
  .step--1 { --t: 0.06; } .step--2 { --t: 0.24; } .step--3 { --t: 0.44; }
  .rail__tail { opacity: clamp(0.55, calc((var(--sc-p, 0) - 0.62) * 6 + 0.55), 1); }
}
.steps[data-sc-act="flow"] .rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; height: auto; padding-block: var(--section) var(--s-12); gap: var(--s-6); max-width: var(--maxw); margin-inline: auto; }
.steps[data-sc-act="flow"] .rail__lead, .steps[data-sc-act="flow"] .step, .steps[data-sc-act="flow"] .rail__tail { width: 100%; margin: 0; }
.steps[data-sc-act="flow"] .rail__lead { grid-column: 1 / -1; margin-bottom: var(--s-4); }
.steps[data-sc-act="flow"] .rail__tail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; }
.steps[data-sc-act="flow"] .step { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .steps[data-sc-act="flow"] .rail { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ================================================================ PARTS == */
.parts { padding-block: var(--section); overflow: clip; }
.parts__head { text-align: center; display: grid; gap: var(--s-4); justify-items: center; padding-bottom: var(--s-10); }
.parts__head .body { text-align: center; max-width: 52ch; }
.mq { display: grid; gap: var(--s-3); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq__row { display: flex; gap: var(--s-3); width: max-content; animation: mq 60s linear infinite; }
.mq__row--rev { animation-direction: reverse; animation-duration: 72s; }
.mq:hover .mq__row { animation-play-state: paused; }
.mq__row span {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--sc-ink); white-space: nowrap;
  background: var(--sc-surface);
}
.mq__row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brands { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-12) auto 0; max-width: 900px; padding: 0; list-style: none; }
.brands li { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: var(--t-2xl); line-height: 1; color: var(--sc-ink-soft); display: inline-flex; align-items: center; gap: var(--s-4); }
.brands li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.brands .brands__label { font-family: var(--sc-font-text); font-stretch: 100%; text-transform: uppercase; font-size: var(--t-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; font-weight: 600; }
.parts__foot { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-10); }
.badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: 999px; background: var(--yellow); color: var(--ink-on-light); font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); }
.badge svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .mq__row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .mq { mask-image: none; -webkit-mask-image: none; } }

/* ============================================================== PARTNERS == */
/* Logo band on the home page, between the reviews and the FAQ: the metals marquee grammar with logos in tokens. */
.partners { padding: var(--s-4) 0 var(--s-6); }
.partners__title { margin: 0 0 var(--s-8); text-align: center; }
.mq--logos .mq__row { gap: var(--s-4); animation-duration: 55s; }
.mq--logos .mq__row span.mq__logo { padding: 0 var(--s-8); height: 88px; border-radius: 999px; border: 1px solid var(--line); background: var(--sc-surface); }
.mq--logos .mq__row span.mq__logo::before { display: none; }
.mq--logos .mq__logo img { display: block; height: var(--lh, 44px); width: auto; }
@media (max-width: 640px) {
  .partners { padding: 0 0 var(--s-4); }
  .partners__title { margin-bottom: var(--s-6); }
  .mq--logos .mq__row { gap: var(--s-3); animation-duration: 40s; }
  .mq--logos .mq__row span.mq__logo { height: 72px; padding: 0 var(--s-6); }
  .mq--logos .mq__logo img { height: calc(var(--lh, 44px) * 0.82); }
}

/* ================================================================= ZONE == */
.zone { padding-block: var(--section); }
.zone__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--s-10), 6vw, var(--s-24)); align-items: center; }
.zone__copy { display: grid; gap: var(--s-6); }
.cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); }
.cities li { display: flex; align-items: center; gap: var(--s-2); }
.cities li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-ink-soft); flex: none; }
.cities li.home { color: var(--sc-ink); font-weight: 600; }
.cities li.home::before { background: var(--yellow); width: 7px; height: 7px; }
.map { position: relative; border-radius: 16px; background: var(--sc-surface); border: 1px solid var(--line); padding: var(--s-6); }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
.map .river { fill: none; stroke: #5b5853; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - clamp(0, (var(--sc-p, 0) - 0.18) * 1.9, 1))); }
.map .river--2 { stroke-width: 6; stroke-dashoffset: calc(var(--len) * (1 - clamp(0, (var(--sc-p, 0) - 0.3) * 1.9, 1))); }
.map .rlabel { font-size: 15px; fill: var(--sc-ink-soft); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.map .city { transform-box: fill-box; transform-origin: center; transform: scale(clamp(0, calc((var(--sc-p, 0) - var(--i) * 0.018 - 0.3) * 8), 1)); }
.map .city circle { fill: var(--sc-ink); }
.map .city text { font-size: 19px; fill: var(--sc-ink); font-weight: 500; opacity: clamp(0, calc((var(--sc-p, 0) - var(--i) * 0.018 - 0.36) * 8), 1); }
.map .city.home circle { fill: var(--yellow); }
.map .city.home text { font-weight: 700; }
.map .pulse { fill: none; stroke: var(--yellow); stroke-width: 2; opacity: 0.6; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } }
.map__key { position: absolute; left: var(--s-6); bottom: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.map__key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
@media (max-width: 980px) { .zone__grid { grid-template-columns: 1fr; } .map { order: -1; } }
@media (max-width: 600px) { .map .city:not(.home) text { display: none; } .map .city circle { r: 7; } .map { padding: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .map .river, .map .river--2 { stroke-dashoffset: 0 !important; } .map .city { transform: none !important; } .map .city text { opacity: 1 !important; } .map .pulse { animation: none; } }

/* ================================================================ TRUST == */
.trust { padding-block: var(--section); border-top: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-12); align-items: start; }
.trust__grid > h2 { font-size: var(--d-md); }
.proofline { margin: 0; font-size: var(--lede); line-height: 1.5; text-wrap: pretty; max-width: 62ch; }
.proofline span { display: inline; color: var(--sc-ink-soft); }
.proofline span + span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); margin: 0 var(--s-3) 0.15em; vertical-align: middle; }
.proofline b { color: var(--sc-ink); font-weight: 600; }
.stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-10); border-top: 1px solid var(--line); }
.stats li { flex: 1 1 auto; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-1); }
.stats b { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: var(--d-sm); line-height: 1; color: var(--yellow); white-space: nowrap; }
.stats span { color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
.members { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); color: var(--sc-ink-soft); }
.members > span:first-child { margin-right: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.members .members__mark {
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; font-size: var(--t-xl); line-height: 1; letter-spacing: 0.04em;
  padding: var(--s-2) var(--s-4); border: 1.5px solid var(--line-strong); border-radius: 8px;
}
@media (max-width: 980px) { .trust__grid { grid-template-columns: 1fr; gap: var(--s-8); } }
@media (max-width: 600px) { .stats li { flex: 1 1 40%; } }

/* ================================================================== FAQ == */
.faq { padding-block: var(--section); }
.faq__head { display: grid; gap: var(--s-4); padding-bottom: var(--s-12); max-width: 680px; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-8); align-items: start; }
.faq__side { position: sticky; top: calc(var(--nav-h) + var(--s-10)); display: grid; gap: var(--s-8); }
.tabs { display: grid; gap: var(--s-1); }
.tabs button {
  text-align: left; padding: var(--s-3) var(--s-4); border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--sc-ink-soft);
  font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.tabs button:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.tabs button:active { transform: scale(0.98); }
.tabs button[aria-selected="true"] { background: var(--yellow); color: var(--ink-on-light); }
.faq__call { padding: var(--s-6); border-radius: 16px; background: var(--sc-surface); border: 1px solid var(--line); display: grid; gap: var(--s-3); }
.faq__call-t { margin: 0; font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-lg); }
.faq__call p { margin: 0; color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
.faq__panel[hidden] { display: none; }
.acc { display: grid; gap: var(--s-2); }
.acc__item { border: 1px solid var(--line); border-radius: 16px; background: var(--sc-surface); overflow: clip; transition: border-color 160ms var(--ease-out); }
.acc__item:hover { border-color: var(--line-strong); }
.acc__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6); background: transparent; border: 0; color: var(--sc-ink); text-align: left; cursor: pointer;
  font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base);
}
.acc__q svg { width: 20px; height: 20px; flex: none; color: var(--sc-ink-soft); transition: transform 700ms var(--ease); }
.acc__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease); }
.acc__a > div { overflow: hidden; }
.acc__a p { margin: 0; padding: 0 var(--s-6) var(--s-6); color: var(--sc-ink-soft); max-width: 62ch; }
.acc__item.open .acc__a { grid-template-rows: 1fr; }
@media (max-width: 980px) { .faq__grid { grid-template-columns: 1fr; } .faq__side { position: static; } .tabs { display: flex; flex-wrap: wrap; } }

/* ================================================================ CLOSE == */
.close { --il-ink: #4A4845; --il-paper: var(--sc-canvas); --il-accent: #6a5a2a; --il-soft: #3a3835; }
.close__stage { display: grid; align-content: space-between; height: 100svh; padding-top: calc(var(--nav-h) + var(--s-8)); overflow: clip; }
.close[data-sc-act="flow"] .close__stage { height: auto; min-height: 100svh; position: relative; }
.close__yard { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; width: max(120%, 1500px); opacity: 0.55; pointer-events: none; z-index: 0; }
.close__yard svg { width: 100%; height: auto; display: block; }
.close__body { position: relative; z-index: 1; display: grid; gap: var(--s-6); text-align: center; justify-items: center; }
.close__num {
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-decoration: none; color: var(--yellow);
  font-size: clamp(var(--t-5xl), 1.5rem + 5.6vw, var(--t-8xl)); line-height: 0.9; letter-spacing: -0.01em;
  display: inline-block; transition: color 160ms var(--ease-out);
}
.close__num:hover { color: var(--yellow-hover); }
.close__num:active { transform: scale(0.99); }
.close__sub { color: var(--sc-ink-soft); max-width: 52ch; margin: 0; }
.close__info { display: grid; grid-template-columns: repeat(3, auto); gap: var(--s-10); justify-content: center; text-align: left; margin-top: var(--s-4); }
.close__info dl { margin: 0; display: grid; gap: var(--s-1); }
.close__info dt { font-size: var(--t-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.close__info dd { margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); }
.close__info dd b { font-weight: 600; }
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: var(--s-6) 0 var(--s-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-canvas) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.foot img { height: 22px; width: auto; display: block; opacity: 0.9; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--sc-ink); text-decoration: underline; }
@media (max-width: 860px) {
  .close__stage { padding-top: calc(var(--nav-h) + var(--s-10)); }
  .close__info { grid-template-columns: 1fr; gap: var(--s-4); text-align: center; }
  .close__info dl { justify-items: center; }
  .close__yard { bottom: auto; top: 0; width: max(200%, 1100px); opacity: 0.35; }
  .foot { justify-content: center; text-align: center; }
}
@media (max-height: 720px) {
  .close__stage { height: auto; min-height: 100svh; }
}

/* ================================================================ COOKIE == */
.cookie {
  position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 80; max-width: 360px;
  padding: var(--s-4); border-radius: 16px; background: color-mix(in oklab, var(--sc-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: var(--sc-e3), var(--sc-edge);
  display: grid; gap: var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft);
  transform: translateY(0); transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
.cookie[hidden] { display: none; }
@media (max-width: 600px) { .cookie { left: var(--s-2); right: var(--s-2); bottom: var(--s-2); max-width: none; grid-template-columns: 1fr auto; align-items: center; padding: var(--s-3); gap: var(--s-3); font-size: var(--t-xs); line-height: var(--lh-xs); } .cookie__acts { flex-direction: column; } }
.cookie p { margin: 0; }
.cookie a { color: var(--sc-ink); }
.cookie__acts { display: flex; gap: var(--s-2); }
.cookie .btn--sm { min-height: 32px; }

/* ================================================================ LEGAL == */
.legal { padding-top: calc(var(--nav-h) + var(--s-24)); padding-bottom: var(--section); }
.legal article { max-width: 720px; display: grid; gap: var(--s-6); }
.legal h2 { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 600; margin: var(--s-6) 0 0; }
.legal p { margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; }

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-group > * { transform: none; translate: none; filter: none; transition-duration: 220ms; }
  .fc, .hero__illo, .hero__blob { transform: none !important; }
  .plate { transform: none !important; }
  .plate::after { display: none; }
  .tag .w { transition: none; color: var(--sc-ink); }
  .part, .tag-l, .dm__lines line { opacity: 1 !important; }
  .step { opacity: 1 !important; transform: none !important; }
}

/* progress bar from the engine: keep it, thin */
[data-sc-progress] { height: 2px; }

/* ------------------------------------------------------ hero entrance -- */
.ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ln > span { display: block; transform: translateY(110%); animation: rise 900ms var(--ease) forwards; }
.ln:nth-child(2) > span { animation-delay: 90ms; }
.hero__copy > .rise { opacity: 0; transform: translateY(24px); animation: fadeUp 900ms var(--ease) forwards; }
.hero__copy > .rise:nth-of-type(1) { animation-delay: 0ms; }
.hero__copy > .rise.r2 { animation-delay: 260ms; }
.hero__copy > .rise.r3 { animation-delay: 380ms; }
.hero__copy > .rise.r4 { animation-delay: 500ms; }
.hero__art .il, .hero__art .fc { opacity: 0; animation: fadeUp 1100ms var(--ease) forwards; }
.hero__art .il { animation-delay: 200ms; }
.hero__art .fc--1 { animation-delay: 700ms; }
.hero__art .fc--2 { animation-delay: 850ms; }
.hero__art .fc--3 { animation-delay: 1000ms; }
@keyframes rise { to { transform: none; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ln > span, .hero__copy > .rise, .hero__art .il, .hero__art .fc { animation: none; opacity: 1; transform: none; }
}

/* ======================================================= SERVICE PAGES == */
.hero--sv {
  min-height: 0; margin: calc(var(--nav-h) + var(--s-6) + var(--s-4)) var(--s-4) 0; border-radius: 24px;
  padding-top: clamp(var(--s-12), 6vw, var(--s-24)); padding-bottom: clamp(var(--s-12), 6vw, var(--s-24));
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.hero--sv .hero__copy h1 { font-size: var(--d-lg); }
.hero--sv .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero--sv .hero__art { margin-inline: var(--s-4); }
.hero--sv .hero__illo { transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0); }
.hero--sv .fc--1 { top: -2%; left: -4%; --depth: 22px; }
.hero--sv .fc--2 { right: -4%; bottom: 2%; top: auto; --depth: 30px; }
.hero--yellow, .plate--yellow { background: var(--yellow); color: var(--ink-on-light); --sc-ink: #1F1F1F; --sc-ink-soft: var(--soft-on-yellow); --line: rgba(31,31,31,0.14); --line-strong: rgba(31,31,31,0.3); --il-accent: #FFFFFF; --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #6f5f30; }
.hero--dark, .plate--dark { background: var(--surface-2); color: var(--sc-ink); --il-ink: #F5F2EC; --il-paper: var(--surface-2); --il-soft: #8a857d; }
.hero--paper, .plate--paper { background: var(--paper); color: var(--ink-on-light); --sc-ink: #1F1F1F; --sc-ink-soft: var(--soft-on-paper); --line: rgba(31,31,31,0.12); --line-strong: rgba(31,31,31,0.28); --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #b9b4ab; }
.hero--sv .hero__copy .lede { color: inherit; }
.hero--sv .hero__proof, .hero--sv .label { color: var(--sc-ink-soft); }
.hero--yellow .hero__proof svg, .hero--paper .hero__proof svg { color: var(--ink-on-light); }
.hero--yellow .fc, .hero--paper .fc { background: color-mix(in oklab, #1F1F1F 92%, transparent); color: #F5F2EC; border-color: rgba(255,255,255,0.08); }
.hero--yellow .fc .fc__s, .hero--paper .fc .fc__s { color: #ABA79F; }
.hero--yellow .u::after { background: var(--ink-on-light); }
.aka { margin-top: var(--s-8); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); max-width: 72ch; }

.sec__head { display: grid; gap: var(--s-4); max-width: 680px; padding-bottom: var(--s-12); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(var(--s-10), 6vw, var(--s-24)); align-items: center; }
.split > .rv-group { display: grid; gap: var(--s-6); justify-items: start; }
.split--rev > .rv-group { order: 1; }
.split__art .il { max-width: 520px; margin-inline: auto; }
.feat, .chips-sec, .rules, .clients, .recycle, .brands-sec { padding-block: var(--section); }
.feat--tight { padding-block: var(--s-16); }
.feat__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-12); border-top: 1px solid var(--line); }
.split .feat__list { grid-template-columns: 1fr; }
.feat__list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); align-items: start; }
.feat__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); color: var(--ink-on-light); display: grid; place-items: center; }
.feat__ico svg { width: 24px; height: 24px; }
.feat__list h3 { margin: 0 0 var(--s-1); font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; }
.feat__list p { margin: 0; color: var(--sc-ink-soft); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips li { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: 999px; background: var(--sc-surface); border: 1px solid var(--line); font-weight: 500; font-size: var(--t-sm); line-height: var(--lh-sm); }
.chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.chips--ghost li { background: transparent; }
.note { margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); max-width: 58ch; }
.rules__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-6); align-items: start; }
.rules__grid--2 { grid-template-columns: 1fr 1fr; }
.ledger { display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--line); border-radius: 16px; background: var(--sc-surface); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; }
.checks svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--yellow); }
.ledger--firm .checks svg { color: var(--yellow); }
.callout { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-6); border-radius: 16px; background: var(--yellow); color: var(--ink-on-light); box-shadow: var(--sc-e2); }
.callout p { margin: 0; font-weight: 500; }
.callout--big { gap: var(--s-3); }
.callout--big svg { width: 40px; height: 40px; }
.callout--big p { font-weight: 400; color: var(--soft-on-yellow); }
.eval { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-6); align-items: start; }
.eval__card { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: 16px; background: var(--sc-surface); border: 1px solid var(--line); }
.eval__card .il { max-width: 220px; margin-inline: auto; --il-paper: var(--sc-surface); }
.eval__card p { margin: 0; color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
.eval__card .metals span { border-color: color-mix(in oklab, var(--yellow) 60%, transparent); color: var(--yellow); }
ol.num { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: n; }
ol.num li { counter-increment: n; display: flex; gap: var(--s-3); align-items: baseline; }
ol.num li::before { content: counter(n, decimal-leading-zero); font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; color: var(--yellow); font-size: var(--t-lg); min-width: 1.6em; }
.clients__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-10); align-items: center; }
.clients__row > div { display: grid; gap: var(--s-3); }
.recycle__row { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-6); align-items: center; padding: var(--s-8); border: 1px solid var(--line); border-radius: 24px; background: var(--sc-surface); }
.recycle__row > svg { width: 64px; height: 64px; color: var(--yellow); }
.recycle__row > div { display: grid; gap: var(--s-2); }
.brands--left { justify-content: flex-start; margin: var(--s-6) 0; max-width: none; }
.brands-sec .wrap { display: grid; gap: var(--s-2); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.steps[data-sc-act="flow"] .step__art .il { max-width: 220px; }
@media (max-width: 980px) {
  .hero--sv .hero__grid { grid-template-columns: 1fr; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev > .rv-group { order: 0; }
  .split__art { order: -1; }
  .split__art .il { max-width: 380px; }
  .feat__list { grid-template-columns: 1fr; }
  .rules__grid, .eval { grid-template-columns: 1fr; }
  .rules__grid--2 { grid-template-columns: 1fr; }
  .clients__row { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 860px) {
  .hero--sv { margin-inline: var(--s-2); border-radius: 20px; }
  .hero--sv .hero__art { margin-top: var(--s-8); }
  .hero--sv .fc--1 { top: -6%; }
  .hero--sv .fc--2 { bottom: -4%; }
  .recycle__row { grid-template-columns: 1fr; padding: var(--s-6); }
}

/* ============================================== SERVICE PAGES, v2 (home grammar) == */
.svc-switch { display: flex; gap: var(--s-1); padding: var(--s-1); border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 6%, transparent); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.svc-switch::-webkit-scrollbar { display: none; }
.svc-switch a { padding: 6px var(--s-4); border-radius: 999px; font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--sc-ink-soft); text-decoration: none; white-space: nowrap; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.svc-switch a:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.svc-switch a[aria-current="page"] { background: var(--yellow); color: var(--ink-on-light); }
.hero--svc .hero__copy h1 { font-size: clamp(var(--t-5xl), 1rem + 4.4vw, 4.75rem); }
.hero--svc .fc--3 { display: none; }
.hero--svc .fc--2 { right: -6%; top: auto; bottom: 6%; }
.stack--svc { padding-top: var(--s-4); }
.plate__grid--full { grid-template-columns: 1fr; }
.plate__grid--full .plate__copy { gap: var(--s-6); }
.plate .lede { max-width: 60ch; }
.plate__sub { margin-top: var(--s-2); display: grid; gap: var(--s-3); }
.plate .feat__list { border-top-color: var(--line); }
.plate .feat__list li { border-bottom-color: var(--line); padding: var(--s-4) 0; }
.plate .feat__list p { color: var(--sc-ink-soft); }
.plate--yellow .feat__ico { background: var(--ink-on-light); color: var(--yellow); }
.plate--paper .feat__ico { background: var(--ink-on-light); color: var(--yellow); }
.plate--yellow .chips li { background: rgba(255,255,255,0.42); border-color: transparent; }
.plate--yellow .chips li::before { background: var(--ink-on-light); }
.plate--paper .chips li { background: #FFFFFF; border-color: rgba(31,31,31,0.1); }
.col { display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.col__t { margin: 0; font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600; }
.col p { margin: 0; color: var(--sc-ink-soft); }
.col--note p { font-weight: 500; color: inherit; }
.col .btn { justify-self: start; }
.plate .col--note .btn--dark { background: var(--ink-on-light); color: #F5F2EC; }
.plate--yellow .checks svg, .plate--paper .checks svg { color: var(--ink-on-light); }
.plate--paper .callout, .plate--yellow .callout { box-shadow: var(--sc-e2); }
.plate--yellow .callout { background: var(--ink-on-light); color: var(--sc-ink); }
.plate--yellow .callout .btn--dark { background: var(--yellow); color: var(--ink-on-light); }
.plate .callout h3 { margin: 0; }
.plate .callout p { color: var(--soft-on-yellow); }
.plate--dark .checks svg { color: var(--yellow); }
.plate .rules__grid { width: 100%; }
.plate .brands { margin: 0; justify-content: flex-start; }
.plate--paper .brands li { color: var(--soft-on-paper); }
.plate .plate__note .link { color: inherit; }

/* steps as one pinned act (autos) */
.sp { --il-ink: #F5F2EC; --il-paper: var(--sc-canvas); --il-soft: #7a766f; }
.sp__stage { display: grid; grid-template-rows: auto 1fr auto; height: 100svh; padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-8); max-width: var(--maxw); margin-inline: auto; gap: var(--s-6); }
.sp__head { display: grid; gap: var(--s-3); max-width: 680px; }
.sp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); align-items: center; min-height: 0; }
.sp__copy { position: relative; min-height: 320px; align-self: stretch; }
.sp__step { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: grid; gap: var(--s-3); }
.sp__step p:last-child { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; font-size: var(--lede); line-height: 1.4; }
.sp__dots { position: absolute; left: 0; bottom: 0; display: flex; gap: var(--s-2); }
.sp__dots span { width: 28px; height: 3px; border-radius: 2px; background: var(--yellow); opacity: clamp(0.22, calc(1 - abs(var(--sc-p, 0) - var(--m)) * 3.2), 1); }
.sp__art { position: relative; aspect-ratio: 4 / 3; max-height: 100%; }
.sp__blob { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1.15; translate: -50% -50%; border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%; background: var(--yellow); opacity: 0.07; }
.sp__illo { position: absolute; inset: 0; display: grid; place-items: center; }
.sp__illo .il { width: 86%; max-width: 520px; }
.sp__tail { margin: 0; color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); max-width: 80ch; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.sp__tail b { color: var(--sc-ink); font-weight: 600; }
@media (max-width: 860px) {
  .sp__stage { padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-6); gap: var(--s-4); }
  .sp__grid { grid-template-columns: 1fr; gap: var(--s-4); align-content: center; }
  .sp__art { order: -1; aspect-ratio: 16 / 9; }
  .sp__illo .il { width: 60%; }
  .sp__copy { min-height: 240px; }
  .sp__step p:last-child { font-size: var(--t-base); }
  .sp__tail { display: none; }
}

/* fly stages (catalyseurs valeur, pièces cour) */
.fly-act { --il-ink: #F5F2EC; --il-paper: var(--sc-canvas); --il-soft: #7a766f; }
.fly__stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100svh; padding-top: calc(var(--nav-h) + var(--s-8)); padding-bottom: var(--s-6); }
.fly__head { text-align: center; display: grid; gap: var(--s-3); justify-items: center; padding-inline: var(--gutter); }
.fly__head .body { max-width: 60ch; text-align: center; }
.fly__box { position: relative; height: 100%; width: auto; max-width: min(100% - 2 * var(--gutter), 1240px); margin: var(--s-3) auto 0; aspect-ratio: 16 / 8.6; align-self: center; justify-self: center; }
.fly__blob { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1.2; translate: -50% -50%; border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%; background: var(--yellow); opacity: 0.08; }
.fly__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fly__lines line { stroke: var(--sc-ink-soft); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0; }
.fly__center { position: absolute; left: 50%; top: 50%; width: 34%; translate: -50% -50%; }
.fly { position: absolute; left: 0; top: 0; translate: -50% -50%; opacity: 0; will-change: transform, opacity; }
.fly .il svg, .fly__center .il svg { width: 100%; height: auto; }
.fly--card { background: var(--sc-surface); border: 1px solid transparent; border-radius: 16px; padding: var(--s-4); box-shadow: var(--sc-e3), var(--sc-edge); display: grid; gap: var(--s-1); }
.fly--card b { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; color: var(--yellow); font-size: var(--t-xl); line-height: 1; }
.fly--card span { font-size: var(--t-sm); line-height: var(--lh-sm); }
.fly__tag { position: absolute; z-index: 3; opacity: 0; will-change: transform, opacity; padding: 2px var(--s-3); border-radius: 8px; background: var(--yellow); color: var(--ink-on-light); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap; box-shadow: var(--sc-e2); }
.fly__end { text-align: center; display: grid; gap: var(--s-3); justify-items: center; opacity: 0; padding-inline: var(--gutter); will-change: transform, opacity; }
.fly__end p { margin: 0; font-weight: 600; }
.fly__end .metals span { border-color: color-mix(in oklab, var(--yellow) 60%, transparent); color: var(--yellow); }
.fly__end--slot { position: absolute; left: 87%; top: 80%; translate: -50% -50%; padding: 0; }
.fly__box--wall .fly__blob { display: none; }
@media (max-width: 860px) {
  .fly__box { height: auto; aspect-ratio: 3 / 4.2; width: min(100% - 2 * var(--s-4), 520px); max-width: none; }
  .tow__box { aspect-ratio: 1 / 1; }
  .fly__center { width: 56%; }
  .fly--card { padding: var(--s-2) var(--s-3); border-radius: 12px; }
  .fly--card b { font-size: var(--t-base); }
  .fly--card span { font-size: var(--t-xs); line-height: var(--lh-xs); }
  .fly__tag { font-size: var(--t-xs); line-height: var(--lh-xs); padding: 1px var(--s-2); border-radius: 6px; }
  .fly__end--slot { left: 50%; top: 97%; width: max-content; }
}

/* other services */
.others { padding-block: var(--section); }
.others__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-8); }
.other { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: center; padding: var(--s-6); border-radius: 16px; background: var(--sc-surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out); --il-paper: var(--sc-surface); --il-ink: #F5F2EC; --il-soft: #7a766f; }
.other:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.other:active { transform: translateY(0) scale(0.99); }
.other__copy { display: grid; gap: var(--s-2); justify-items: start; }
.other__copy p { margin: 0; color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
@media (max-width: 860px) { .others__grid { grid-template-columns: 1fr; } .other { grid-template-columns: 1fr; } .other__art .il { max-width: 240px; } }
@media (prefers-reduced-motion: reduce) { .fly, .fly__tag, .fly__end, .fly__lines line { opacity: 1 !important; } .sp__dots span { opacity: 1; } }

/* the tow (autos scrap peak) */
.tow-act { --il-ink: #F5F2EC; --il-paper: var(--sc-canvas); --il-soft: #7a766f; }
.tow__box { overflow: clip; }
.tow__ground { position: absolute; left: 4%; right: 4%; top: 74%; height: 1px; background: var(--line-strong); }
.tow__truck, .tow__car, .tow__cash, .tow__receipt { position: absolute; left: 0; top: 0; will-change: transform; }
.tow__truck .il svg, .tow__car .il svg, .tow__cash .il svg, .tow__receipt .il svg { width: 100%; height: auto; }
.tow__car { z-index: 2; }
.tow__body { position: relative; z-index: 1; }
.tow__wheel { position: absolute; width: 20%; left: 18%; top: 80%; transform: translate(-50%, -50%); will-change: transform; z-index: 2; }
.tow__wheel--r { left: 82%; }
.tow__cash, .tow__receipt { opacity: 0; z-index: 3; }
.tow__end { position: absolute; left: 50%; top: 50%; z-index: 4; opacity: 0; width: min(90%, 720px); text-align: center; pointer-events: none; will-change: transform, opacity; }
.tow__end p { margin: 0; position: relative; }
.tow__blob { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1.15; translate: -50% -50%; border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%; background: var(--yellow); opacity: 0.09; }
.tow__ground { will-change: opacity; }
@media (max-width: 860px) { .tow__blob { width: 80%; } }
@media (max-width: 860px) {
  .tow__ground { top: 78%; }
}

/* ------------------------------------------------- mobile call bar (thumb zone) -- */
.callbar { display: none; }
@media (max-width: 860px) {
  .callbar {
    position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 52px; padding: var(--s-3) var(--s-4); border-radius: 999px;
    background: var(--yellow); color: var(--ink-on-light); text-decoration: none; font-weight: 600;
    box-shadow: var(--sc-e3);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  }
  .callbar svg { width: 20px; height: 20px; }
  .callbar b, .callbar__n { font: inherit; letter-spacing: inherit; }
  .callbar:active { transform: scale(0.98); }
  .close__stage { padding-bottom: 88px; }
  .close[data-sc-act="flow"] .close__stage { padding-bottom: 88px; }
  .foot { padding-bottom: var(--s-8); }
  .menu ul { padding-bottom: 80px; }
}
/* 404 */
.hero--404 { min-height: 100svh; }
.hero--404 .hero__proof a { color: var(--sc-ink-soft); }
.hero--404 .hero__proof a:hover { color: var(--sc-ink); }

/* trust as prose + logo band */
.trust__copy { display: grid; gap: var(--s-4); }
.link-inline { color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link-inline:hover { text-decoration-thickness: 3px; }
.trust__p { margin: 0; font-size: var(--lede); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; max-width: 62ch; }
.trust__p:first-child { color: var(--sc-ink); }
.members { margin-top: var(--s-12); padding: var(--s-6) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
.members__t { margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink-soft); }
.members__logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.members__logos li { display: flex; align-items: center; height: 44px; }
.members__logos img { height: 44px; width: auto; display: block; }
.members__logos .members__mark { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; font-size: var(--t-2xl); letter-spacing: 0.04em; padding: var(--s-1) var(--s-3); border: 1.5px solid var(--line-strong); border-radius: 8px; }
@media (max-width: 860px) { .members { grid-template-columns: 1fr; } .members__logos { gap: var(--s-6); } .members__logos img, .members__logos li { height: 36px; } }
.close__sub span { display: block; }
/* reviews */
.review { width: 28%; gap: var(--s-3); padding: var(--s-6); }
.review__stars { display: flex; gap: 2px; color: var(--yellow); }
.review__stars svg { width: 16px; height: 16px; }
.review__text { margin: 0; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--sc-ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review footer { display: grid; gap: 2px; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--sc-ink-soft); }
.review footer b { color: var(--sc-ink); font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); }
.reviews-act.is-flow .fly__stage { height: auto; padding-block: var(--section) var(--s-12); gap: var(--s-8); }
.reviews-act.is-flow .fly__box { position: static; height: auto; aspect-ratio: auto; width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter)); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.reviews-act.is-flow .review { position: static; translate: none; opacity: 1; width: auto; transform: none !important; }
.reviews-act.is-flow .fly__end { opacity: 1; transform: none; margin-top: var(--s-6); }

/* ======================================================== V4 VISUAL PASS ==
   Borrowed from the client mockup: hard-offset "3D" buttons, strong-bordered
   small cards, cream reading sections with a 6px yellow rule at every change
   of ground, yellow numbered discs on the steps, thick yellow link underlines,
   monospaced kickers. Everything is transform/box-shadow/colour: the scroll
   engine and the scenes are untouched. */
:root { --btn-line: #1F1F1F; --btn-shadow: #A87C0B; --card-line: #3A3A3A; --card-shadow: #A87C0B; --card-bg: var(--sc-surface); --gold: #A87C0B; }

/* 3D buttons, as on the mockup: a pill whose 3px border merges with the fill or the
   ground, and a hard 5px offset base. Yellow on charcoal gets a gold base, charcoal on
   yellow gets a gold base, yellow on paper gets a charcoal base. Text only, no icons. */
:root { --btn-line: var(--yellow); --btn-shadow: #B8860F; }
.btn {
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.035em;
  font-size: 19px; line-height: 1; padding: 14px 28px; min-height: 52px; gap: 0;
  border: 3px solid var(--btn-line); box-shadow: 5px 5px 0 var(--btn-shadow);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn svg { display: none; }
.btn:hover { background: var(--yellow); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--btn-shadow); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--btn-shadow); }
.btn--lg { font-size: 24px; min-height: 64px; padding: 18px 36px; }
.btn--sm { font-size: 15px; min-height: 40px; padding: 9px 18px; border-width: 2px; box-shadow: 3px 3px 0 var(--btn-shadow); }
.btn--sm:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--btn-shadow); }
.btn--dark, .plate .col--note .btn--dark { background: #1F1F1F; color: var(--yellow); border-color: #1F1F1F; --btn-shadow: #A87C0B; }
.btn--dark:hover, .plate .col--note .btn--dark:hover { background: #1F1F1F; }
.plate--paper .btn:not(.btn--dark), .plate--paper .btn:not(.btn--dark):hover { border-color: #1F1F1F; --btn-shadow: #1F1F1F; }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--sc-ink); color: var(--sc-canvas); transform: none; box-shadow: none; }
.btn--ghost:active { transform: none; }
.isl__cta { min-height: 40px; padding: 8px 18px; font-size: 16px; border-width: 2px; box-shadow: 3px 3px 0 var(--btn-shadow); }
.isl__cta:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--btn-shadow); }
.isl__cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--btn-shadow); }
@media (max-width: 980px) { .isl__cta { padding: 0; } .isl__cta svg { display: block; } }
@media (max-width: 860px) {
  .callbar { font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.035em; border: 3px solid var(--yellow); box-shadow: 4px 4px 0 var(--btn-shadow); }
  .callbar svg { display: none; }
  .callbar:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--btn-shadow); }
  .btn--lg { font-size: 20px; min-height: 56px; padding: 15px 28px; }
}
.act-cta { display: flex; justify-content: center; padding: var(--s-6) var(--gutter) var(--section); }
.plate__cta .btn, .why__lead .btn, .zone__copy .btn, .rail__tail .btn, .parts__foot .btn, .faq__call .btn { margin: 4px 6px 8px 0; }

/* strong-bordered small cards */
.fly--card, .review.fly--card, .fc, .step, .other, .faq__call, .why__quote {
  border: 3px solid var(--card-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--card-shadow); background: var(--card-bg);
}
.fc { background: color-mix(in oklab, var(--sc-surface) 92%, transparent); }
.fly--card { border-radius: 16px; }
.step__art { border-radius: 12px; }
.other:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--card-shadow); border-color: var(--card-line); }
@media (max-width: 599px) { .fly--card, .review.fly--card, .fc, .step, .other, .faq__call, .why__quote { box-shadow: 4px 4px 0 var(--card-shadow); border-width: 2px; } }

/* numbered discs on the steps */
.step .step__num {
  width: 40px; height: 40px; border-radius: 999px; background: var(--yellow); color: #1F1F1F; border: 3px solid #1F1F1F;
  display: grid; place-items: center; font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; font-size: 18px; letter-spacing: 0; line-height: 1;
}

/* thick yellow underline on action links, like the H1 */
.link { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.link:hover { text-decoration-thickness: 4px; }

/* monospaced kickers */
.label { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; letter-spacing: 0.14em; font-weight: 600; }

/* Hero copy: sub-title and the line under the button stay on one line once the hero is
   two columns; the size follows the column width so the longest line (about 70 characters)
   never wraps or spills. Below 900px the hero stacks and the text wraps normally. */
.hero__copy { container-type: inline-size; }
@media (min-width: 900px) {
  .hero__copy .lede { max-width: none; white-space: nowrap; font-size: clamp(16px, 2.95cqw, 21px); line-height: 1.35; }
  .hero__under { max-width: none; white-space: nowrap; font-size: clamp(14px, 2.35cqw, 17px); }
}
.hero__ctas { gap: var(--s-4); }

/* buttons hug their text wherever they sit in a grid; centred rows stay centred */
.btn { width: max-content; max-width: 100%; justify-self: start; }
.brands__note { text-align: center; }
.dm__blob { will-change: opacity; }

/* Hero heading: each authored line stays on one line; the size follows the column so the
   longest line (15 characters) always fits. The yellow rule therefore ends with the text. */
.hero__copy { min-width: 0; }
.hero__copy h1, .hero--svc .hero__copy h1, .hero--sv .hero__copy h1 { font-size: clamp(2.25rem, 16.1cqw, 5.375rem); } /* longest line ≤ 13 characters: ~86px on desktop */
.hero__copy .ln { white-space: nowrap; }
@media (min-width: 900px) { .hero .label { white-space: nowrap; } }

/* Floating cards sit in the empty margins of each drawing, never on the truck, the car,
   the shelf or the door. */
.hero[data-svc="home"] .fc--1 { top: -6%; left: -4%; }
.hero[data-svc="home"] .fc--2 { top: -2%; right: -6%; }
.hero[data-svc="home"] .fc--3 { bottom: -14%; left: 4%; }
.hero[data-svc="autos"] .fc--1 { top: -14%; left: -6%; }
.hero[data-svc="autos"] .fc--2 { bottom: -16%; right: -4%; top: auto; }
.hero[data-svc="pieces"] .hero__illo { width: 72%; margin-inline: auto; }
.hero[data-svc="pieces"] .fc--1 { top: -12%; left: -4%; }
.hero[data-svc="pieces"] .fc--2 { bottom: -12%; right: -4%; top: auto; }
@media (max-width: 980px) {
  .hero[data-svc] .fc--1 { top: -8%; left: 0; right: auto; bottom: auto; }
  .hero[data-svc] .fc--2 { bottom: -8%; right: 0; top: auto; left: auto; }
  .hero[data-svc="home"] .fc--3 { display: none; }
  .hero[data-svc="pieces"] .hero__illo { width: 84%; }
}
/* Autos: the ramp runs to the bottom-right corner, so the second card goes above the car instead. */
.hero[data-svc="autos"] .fc--2 { top: -14%; right: -4%; bottom: auto; }
@media (max-width: 980px) {
  .hero[data-svc] .fc--1 { top: -18%; }
  .hero[data-svc] .fc--2 { bottom: -22%; top: auto; }
}
@media (max-width: 980px) {
  .hero__art { margin-block: var(--s-12) var(--s-10); }
  .hero[data-svc] .fc--1 { top: -14%; }
  .hero[data-svc] .fc--2 { bottom: -18%; }
  .hero[data-svc="autos"] .fc--2 { bottom: -30%; }
}

/* Services intro spans the plate width (two lines on desktop); the plate call row never wraps on desktop. */
.stack__intro { max-width: none; font-size: var(--t-lg); line-height: var(--lh-lg); }
@media (min-width: 900px) { .plate__cta { flex-wrap: nowrap; gap: var(--s-6); } .plate__cta .link { white-space: nowrap; } }

/* Plates stay whole on screen: the drawing is capped by the viewport height and short
   screens get tighter padding. */
.plate__art .il svg { max-height: calc(100svh - var(--nav-h) - 220px); width: auto; max-width: 100%; margin-inline: auto; }
@media (max-height: 940px) { .plate { padding-block: var(--s-6); } .plate__copy { gap: var(--s-4); } .plate .lede { font-size: var(--t-lg); line-height: var(--lh-lg); } }

/* Six converter types in two columns so the plate fits one screen. */
@media (min-width: 900px) { .feat__list--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } .feat__list--2 li { padding-block: var(--s-3); } .feat__list--2 li:nth-child(2) { border-top: 1px solid var(--line); } }
.plate .plate__cta .link { white-space: normal; }
/* Each pinned plate holds fully visible for about a third of a screen before the next one
   slides over it, so the call button can be pressed without racing the scroll. */
.plate + .plate { margin-top: clamp(96px, 28svh, 280px); }
.plate__note b { color: var(--sc-ink); font-weight: 600; }

@media (max-height: 940px) { .plate .feat__list li { padding-block: var(--s-2); } .plate .feat__list p { font-size: var(--t-sm); line-height: var(--lh-sm); } .plate__points { gap: var(--s-2); } }

/* Autos: third card under the truck cab, clear of the wheels; hidden on mobile like the home's. */
.hero[data-svc="autos"] .fc--3 { bottom: -16%; left: 2%; top: auto; right: auto; --depth: 16px; }
@media (max-width: 980px) { .hero[data-svc="autos"] .fc--3 { display: none; } }

@media (min-width: 981px) { .hero[data-svc="autos"] .fc--3 { display: flex; } }
/* Tagline lights up in the brand yellow, word by word, and stays yellow. */
.tag p { color: var(--yellow); }
.js .tag .w { color: color-mix(in oklab, var(--yellow) 26%, transparent); }
.js .tag .w.on { color: var(--yellow); }

.members-sec { padding: var(--s-6) 0 var(--section); }
.members-sec .members { margin-top: 0; justify-content: center; }
.plate .brands--left { margin: 0; }

/* Plates that carry a drawing have a narrower text column: their title steps down one size. */
.plate--art .plate__copy h2 { font-size: var(--d-md); }
@media (max-height: 760px) { .plate--art .plate__note { display: none; } .plate .feat__list p { display: none; } }

/* ===== Plates in the brand's own language: drawings, yellow blobs, condensed titles ===== */
.plate__grid { position: relative; }
.plate__medal { position: absolute; top: calc(-1 * var(--s-3)); right: 0; width: clamp(150px, 15vw, 230px); pointer-events: none; }
.plate__medal .il svg { max-height: none; }
.plate--medal .plate__copy > h2, .plate--medal .plate__copy > .lede { max-width: calc(100% - clamp(170px, 16vw, 260px)); }
.plate--medal .plate__copy > .lede { max-width: min(60ch, calc(100% - clamp(170px, 16vw, 260px))); }
.plate--yellow .plate__medal { --il-accent: #FFFFFF; --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #6f5f30; }
.plate--dark .plate__medal { --il-ink: #F5F2EC; --il-paper: var(--surface-2); --il-soft: #8a857d; }
.plate--paper .plate__medal { --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #b9b4ab; }

.feat__list li { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) 0; }
.feat__ico { width: 76px; height: 76px; border-radius: 0; background: none; position: relative; display: grid; place-items: center; }
.feat__ico--icon::before { content: ""; position: absolute; inset: 8px 6px 6px 8px; background: var(--yellow); border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%; transform: rotate(-8deg); }
.feat__ico--icon svg { position: relative; width: 30px; height: 30px; color: var(--ink-on-light); }
.plate--yellow .feat__ico--icon::before { background: var(--ink-on-light); }
.plate--yellow .feat__ico--icon svg { color: var(--yellow); }
.plate--paper .feat__ico--icon svg { color: var(--ink-on-light); }
.feat__ico--il .il { width: 100%; height: 100%; }
.feat__ico--il .il svg { width: 100%; height: 100%; object-fit: contain; }
.plate--yellow .feat__ico--il { --il-accent: #FFFFFF; --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #6f5f30; }
.plate--dark .feat__ico--il { --il-ink: #F5F2EC; --il-paper: var(--surface-2); --il-soft: #8a857d; }
.plate--paper .feat__ico--il { --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #b9b4ab; }
.feat__list h3 { font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--t-xl); line-height: 1.05; margin: 0 0 var(--s-1); text-wrap: balance; }
.feat__list p { font-size: var(--t-sm); line-height: var(--lh-sm); }
@media (max-height: 940px) { .feat__list li { grid-template-columns: 60px minmax(0, 1fr); padding: var(--s-3) 0; } .feat__ico { width: 60px; height: 60px; } .feat__ico--icon svg { width: 24px; height: 24px; } .plate__medal { width: clamp(130px, 13vw, 190px); } }
@media (max-width: 899px) { .plate__medal { display: none; } .plate--medal .plate__copy > h2, .plate--medal .plate__copy > .lede { max-width: none; } }
/* The old square tile background must not sit behind the drawings or the blobs. */
.plate--yellow .feat__ico, .plate--paper .feat__ico, .plate--dark .feat__ico, .feat__ico { background: none; border-radius: 0; }
.plate--paper .feat__ico--icon svg, .feat__ico--icon svg { color: var(--ink-on-light); }
.plate--yellow .feat__ico--icon svg { color: var(--yellow); }

/* Service plates: calm. The title keeps its full size next to the drawing; points stay one line. */
.stack--svc .plate--art .plate__copy h2 { font-size: var(--d-lg); }
.stack--svc .plate__points li { font-size: var(--t-base); line-height: var(--lh-base); }
.stack--svc .plate__note { border-top: 0; padding-top: 0; }

@media (max-height: 940px) { .stack--svc .plate--art .plate__copy h2 { font-size: var(--d-md); } }
/* On service plates the secondary link drops under the button as one line instead of wrapping beside it. */
.stack--svc .plate__cta { flex-wrap: wrap; row-gap: var(--s-2); }
.stack--svc .plate__cta .link { white-space: nowrap; }
/* Yellow plates: the drawing sits on a charcoal blob so it keeps the same look as on the dark
   plates (charcoal fills, off-white lines, yellow spot) instead of fading to white-on-yellow. */
/* Yellow plates: the drawing keeps its charcoal subject and white details; its yellow spot
   becomes off-white so it still reads as "subject on a blob", like every other plate. */
.plate--yellow .plate__art .il { --il-accent: #F6F2EA; --il-paper: #FFFFFF; --il-ink: #1F1F1F; --il-soft: #6f5f30; }
/* Mobile: drawings stay compact above the copy so the promise and the button come first. */
@media (max-width: 899px) { .plate__art .il { max-width: 240px; margin-inline: auto; }  }

/* ---------------------------------------------------------------- brands as tiles (maquette « jetons ») -- */
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--s-2); max-width: 900px; margin: var(--s-8) auto 0; }
.brands li { justify-content: center; text-align: center; font-size: 13px; font-stretch: 75%; font-weight: 700; letter-spacing: 0.06em; line-height: 1; color: var(--sc-ink); padding: 10px 8px; min-height: 40px; border: 2px solid var(--yellow); border-radius: 10px; }
.brands li + li::before { content: none; }
.brands .brands__label { grid-column: 1 / -1; border: 0; padding: 0; min-height: 0; justify-content: flex-start; text-align: left; color: var(--sc-ink-soft); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-stretch: 100%; letter-spacing: 0.14em; font-weight: 600; }
.plate .brands, .plate .brands--left { margin: 0; max-width: none; grid-template-columns: repeat(4, 1fr); }
.plate--paper .brands li, .plate--yellow .brands li { border-color: var(--ink-on-light); color: var(--ink-on-light); }
@media (max-height: 940px) { .plate .brands li { padding: 7px 6px; min-height: 34px; } }
@media (max-width: 860px) { .plate .brands { grid-template-columns: repeat(3, 1fr); } .brands li { font-size: 12px; padding: 8px 4px; min-height: 36px; } }
@media (min-width: 981px) { .parts .brands, .brands-sec .brands { grid-template-columns: repeat(8, 1fr); } }

/* Tighter hand-off into the steps rail: the metals section ends sooner and the pinned rail sits above centre. */
.metals-sec { padding-bottom: var(--s-8); }
.rail { padding-bottom: clamp(0px, 100svh - 760px, 320px); } /* keeps the card top ~110px under the stage top on every screen height */

/* Action links in the plates never break inside: the whole link drops under the button when the row is too narrow. */
@media (min-width: 900px) {
  .plate .plate__cta { flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
  .plate .plate__cta .link, .stack--svc .plate__cta .link, .rail__tail .link, .faq__call .link, .other .link, .zone__copy .link { white-space: nowrap; }
}

/* ---------------------------------------------------------------- round of client notes (7 sept., nuit) -- */
/* Services head centred like the other section heads. */
.stack__head { text-align: center; justify-items: center; }
.stack__head .stack__intro { max-width: 62ch; margin-inline: auto; }
/* Steps rail: the three cards share the tallest height; a trailing spacer keeps the last card in view at the end of the pan. */
.steps[data-sc-act="pan"] .rail { display: grid; grid-auto-flow: column; align-items: stretch; align-content: center; justify-content: start; }
.steps[data-sc-act="pan"] .rail__lead, .steps[data-sc-act="pan"] .rail__tail { align-self: center; }
.rail__end { width: clamp(160px, 17vw, 280px); }
.steps[data-sc-act="flow"] .rail__end { display: none; }
/* Reviews: static grid, full text, hover only. */
@media (min-width: 981px) { .reviews-act.is-flow .fly__box { grid-template-columns: repeat(3, 1fr); } }
/* Reviews: no hover; a soft staggered reveal (smaller rise, lighter blur than the site default) as the grid scrolls in. */
.js .reviews-act .rv-group > .review { opacity: 0; translate: 0 48px; filter: blur(6px); transition: opacity 800ms var(--ease), translate 800ms var(--ease), filter 800ms var(--ease); }
.js .reviews-act .rv-group.in > .review { opacity: 1; translate: 0 0; filter: none; }
.reviews-act.is-flow .review__text { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Step cards share one row grid (subgrid): drawing, number, title and text align across the three cards. */
.steps[data-sc-act="pan"] .rail { grid-template-rows: repeat(4, auto); row-gap: var(--s-4); column-gap: var(--s-6); }
.steps[data-sc-act="pan"] .rail__lead, .steps[data-sc-act="pan"] .rail__tail, .steps[data-sc-act="pan"] .rail__end { grid-row: 1 / -1; }
.steps[data-sc-act="pan"] .step { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: var(--s-4); align-items: start; }
.steps[data-sc-act="pan"] .step__art { align-self: stretch; display: grid; place-items: center; }
.steps[data-sc-act="pan"] .step__art .il { max-width: 260px; width: 100%; display: grid; place-items: center; }
.steps[data-sc-act="pan"] .step__art .il svg { max-height: clamp(160px, 24svh, 240px); width: auto; max-width: 100%; }

/* ---------------------------------------------------------------- towing zone without the map -- */
.zone__copy { display: grid; justify-items: center; text-align: center; gap: var(--s-8); }
.zone__head { display: grid; gap: var(--s-4); justify-items: center; max-width: 62ch; }
.zone__head .body { margin: 0; }
.cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); width: 100%; max-width: 1040px; font-size: 13px; line-height: 1; color: var(--sc-ink); }
.cities li { justify-content: center; text-align: center; font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 11px 10px; min-height: 40px; border: 2px solid var(--yellow); border-radius: 10px; white-space: nowrap; }
.cities li::before, .cities li.home::before { content: none; }
.cities li.home { background: var(--yellow); color: var(--ink-on-light); font-weight: 700; }
.zone__foot { display: grid; justify-items: center; gap: var(--s-2); }
.zone__foot .zone__note { margin: 0; max-width: 52ch; }
.zone__foot .btn { margin: var(--s-2) 0 0; }
@media (max-width: 600px) { .cities { grid-template-columns: 1fr 1fr; font-size: 12px; } .cities li { padding: 9px 6px; min-height: 36px; white-space: normal; } }
.zone__head { max-width: 100%; }
.zone__head h2 { max-width: 24ch; text-wrap: balance; }
.zone__head .body { max-width: 62ch; }
@media (min-width: 1100px) { .cities { grid-template-columns: repeat(6, 1fr); max-width: 1140px; } }

/* ---------------------------------------------------------------- closing band + footer (v2, mockup layout) -- */
.zone__foot .btn { justify-self: center; }
.close--v2 { padding: 0; }
.close__band { background: var(--yellow); color: var(--ink-on-light); padding-block: clamp(var(--s-10), 6vw, var(--s-16)); }
.close__bandgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8) var(--s-12); align-items: center; }
.close__bandcopy { display: grid; gap: var(--s-3); }
.close__bandcopy h2 { color: var(--ink-on-light); max-width: 24ch; text-wrap: balance; }
.close__bandcopy p { margin: 0; color: rgba(31, 31, 31, 0.82); max-width: 62ch; font-size: var(--t-lg); line-height: var(--lh-lg); }
.close__band .btn { justify-self: end; }
.close--v2 .foot { display: block; border-top: 0; padding: var(--s-12) 0 var(--s-6); }
.close--v2 .foot__grid { display: grid; grid-template-columns: 1.3fr 0.9fr 1.2fr; gap: var(--s-8) var(--s-10); align-items: start; text-align: left; }
.close--v2 .foot__brand img { height: 34px; width: auto; display: block; opacity: 1; }
.close--v2 .foot__brand p { margin: var(--s-4) 0 0; color: var(--sc-ink-soft); max-width: 40ch; }
.close--v2 .foot__col .label { margin: 0 0 var(--s-4); color: var(--sc-ink-soft); text-transform: uppercase; }
.close--v2 .foot__col ul { display: grid; gap: var(--s-4); justify-items: start; }
.close--v2 .foot__col ul a { color: var(--sc-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.close--v2 .foot__col ul a:hover { text-decoration-thickness: 4px; }
.close--v2 .foot address { font-style: normal; margin: 0 0 var(--s-6); line-height: var(--lh-base); }
.close--v2 .foot address .link { font-size: var(--t-sm); color: var(--sc-ink); }
.close--v2 .foot__hours { margin: 0 0 var(--s-4); display: grid; gap: 2px; color: var(--sc-ink-soft); }
.close--v2 .foot__hours b { color: var(--sc-ink); font-weight: 600; }
.close--v2 .foot__contact .btn { margin-top: var(--s-2); }
.foot__call-verb { display: none; }
@media (max-width: 860px) { .foot__call-verb { display: inline; } }
.close--v2 .foot a.btn, .close--v2 .foot a.btn:hover { color: var(--ink-on-light); text-decoration: none; }
.close--v2 .foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-6); border-top: 1px solid var(--line); margin-top: var(--s-10); padding-top: var(--s-6); color: var(--sc-ink-soft); font-size: var(--t-sm); line-height: var(--lh-sm); }
.close--v2 .foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.close--v2 .foot__legal a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .close__bandgrid { grid-template-columns: 1fr; }
  .close__band .btn { justify-self: start; }
  .close--v2 .foot { text-align: left; padding-top: var(--s-10); }
  .close--v2 .foot__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .close--v2 .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- « Nous trouver » with Google Maps -- */
/* Same ground as the rest of the site: no card, no border. Copy on the left, rounded map on the right. */
.find { padding-block: 0 var(--section); }
.find__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--s-8), 5vw, var(--s-16)); align-items: center; }
.find__copy { display: grid; gap: var(--s-4); justify-items: start; }
.find__copy .label { margin: 0; color: var(--sc-ink-soft); text-transform: uppercase; }
.find__copy h2 { margin: 0; max-width: 16ch; text-wrap: balance; }
.find__copy address { font-style: normal; margin: var(--s-2) 0 0; font-size: var(--t-lg); line-height: var(--lh-lg); }
.find__hours { margin: 0; color: var(--sc-ink-soft); }
.find__hours b { color: var(--sc-ink); font-weight: 600; }
.find__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-4); }
.find__cta .link { white-space: nowrap; }
.find__map { min-height: 440px; border-radius: 20px; overflow: hidden; background: var(--sc-surface); }
.find__map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
@media (max-width: 860px) { .find__grid { grid-template-columns: 1fr; gap: var(--s-8); } .find__map, .find__map iframe { min-height: 300px; } .find__map { border-radius: 16px; } }
/* The map takes all the room right of the copy and matches its height. */
@media (min-width: 861px) {
  .find__grid { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--s-8) var(--s-10); align-items: stretch; }
  .find__copy { align-content: center; }
  .find__map { height: 100%; min-height: 380px; }
  .find__map iframe { height: 100%; min-height: 380px; }
}
@media (min-width: 861px) { .find__grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); } .find__copy h2 { max-width: none; } }
/* The bold truck keeps its own fills in the tow scene (the scene inverts ink/paper for line drawings). */
.tow__truck .il { --il-ink: var(--sc-canvas); --il-paper: #F5F2EC; --il-accent: var(--yellow); }
/* White outline on the truck's charcoal shapes so it reads like the line-drawn car on the dark ground. */
.tow__truck .il svg [fill^="var(--il-ink"] { stroke: #F5F2EC; stroke-width: 9; stroke-linejoin: round; paint-order: stroke fill; }

/* "Pourquoi choisir": one-line title, one-line text. */
.why__item p { max-width: 66ch; }
@media (min-width: 900px) { .why__item h3 { white-space: nowrap; } }

/* Service heroes: the kicker is an H2 carrying the service keyword, styled exactly like the mono label. */
.hero__kicker { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; font-stretch: 100%; color: var(--sc-ink-soft); max-width: none; }

/* Pièces hero: third card, bottom-left of the shelf, desktop only. */
.hero[data-svc="pieces"] .fc--3 { bottom: -17%; left: 0; top: auto; right: auto; --depth: 16px; }
@media (min-width: 981px) { .hero[data-svc="pieces"] .fc--3 { display: flex; } }

/* ---------------------------------------------------------------- keyboard focus in brand yellow -- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .isl__cta:focus-visible, .callbar:focus-visible { outline-color: #F5F2EC; outline-offset: 4px; }
.plate--yellow :focus-visible, .plate--paper :focus-visible, .close__band :focus-visible { outline-color: var(--ink-on-light); }
.skip:focus-visible { outline-color: var(--ink-on-light); }

/* ================================================================ MOBILE v2, phones only ≤ 640px (fora grammar, 9-10 September) == */
/* One column, the desktop cards keep their anatomy (visual on top, label, title, text, 24px inside), a thin flat bar,
   a centred hero without drawing, and one floating call pill that appears once the hero button has scrolled away. */
.hero__chips { display: none; }
.callbar { transition: transform 500ms var(--ease), opacity 400ms var(--ease); }
@media (max-width: 640px) {
  :root { --section: var(--s-16); --gutter: 24px; --d-h1-phone: clamp(2.5rem, 14cqw, 3.5rem); }
  /* -- bar: flat, thin, sticky; logo left, hamburger right on the home page, nothing else -- */
  .isl { top: 0; left: 0; right: 0; translate: none; width: auto; max-width: none; height: var(--nav-h); padding: 0 var(--gutter); gap: var(--s-2); border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; justify-content: space-between; background: color-mix(in oklab, var(--sc-canvas) 86%, transparent); }
  .isl__logo { margin: 0; }
  .isl__logo img { height: 28px; }
  .isl__lang, .isl a.isl__lang, .isl__cta, .isl a.isl__cta, .isl nav { display: none; }
  /* the hamburger stays on every page, service pages included (client request, 10 September) */
  .isl a, .isl button { min-height: 44px; display: inline-flex; align-items: center; }
  .isl a.isl__lang, .isl a.isl__cta { display: none; }
  html { scroll-padding-top: calc(var(--nav-h) + var(--s-4)); }
  /* -- one call: the hero button, then the floating pill once that button has left the screen -- */
  main a.btn[href^="tel:"] { display: none; }
  .hero a.btn[href^="tel:"] { display: inline-flex; }
  .stack--svc .plate__cta, .faq__side, .find__cta, .close__band .btn, .rail__tail .btn, .zone__foot .btn { display: none; }
  /* -- footer: a real call button (same look as the floating pill); the pill hides once this button is on screen -- */
  .foot .btn.foot__call { display: flex; width: 100%; box-sizing: border-box; justify-content: center; height: 48px; min-height: 0; padding-block: 0; margin-top: var(--s-4); gap: 0.28em; font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800; font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.035em; border: 3px solid var(--btn-line); box-shadow: 4px 4px 0 var(--btn-shadow); }
  .foot .btn.foot__call:hover { transform: none; box-shadow: 4px 4px 0 var(--btn-shadow); }
  .foot .btn.foot__call:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--btn-shadow); }
  .callbar { left: calc(var(--gutter) - 3px); right: calc(var(--gutter) - 3px); bottom: max(var(--s-3), env(safe-area-inset-bottom)); box-sizing: border-box; height: 48px; min-height: 0; padding-block: 0; gap: 0.28em; font-size: var(--t-base); border-color: var(--ink-on-light); }
  .callbar.is-armed { transform: translateY(calc(100% + var(--s-6))); opacity: 0; pointer-events: none; }
  .callbar.is-armed.on { transform: none; opacity: 1; pointer-events: auto; }
  .callbar.is-armed.on:active { transform: translate(3px, 3px); }
  /* -- hero: centred, no drawing, kicker as a pill, the three promises in one row under the button -- */
  .hero, .hero--svc, .hero[data-svc="home"] { min-height: 100svh; padding-top: calc(var(--nav-h) + var(--s-8)); padding-bottom: var(--s-10); align-content: start; }
  .hero__grid { padding-top: 0; }
  .hero__copy > .label { margin: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; justify-items: center; }
  /* the drawing comes back under the button, small, inside the first screen; the floating cards stay off */
  /* the drawing sits lower under the button and its halo no longer reaches the button (client request, 10 September) */
  .hero__art { display: block; position: relative; margin: clamp(32px, 5svh, 44px) auto 0; width: 100%; max-width: 300px; }
  .hero__art .fc { display: none !important; }
  .hero__blob { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 78%; height: 104%; aspect-ratio: auto; }
  .hero__illo { position: relative; display: grid; place-items: center; }
  .hero__illo .il, .hero[data-svc="pieces"] .hero__illo, .hero[data-svc="pieces"] .hero__illo .il { width: auto; max-width: 100%; margin: 0 auto; }
  .hero__illo .il svg { height: clamp(96px, 17svh, 150px); width: auto; max-width: 100%; display: block; }
  .hero[data-svc="cat"] .hero__illo .il svg, .hero[data-svc="pieces"] .hero__illo .il svg { height: clamp(120px, 26svh, 200px); } /* narrower drawings, more room under a 3-line H1 */
  .hero__copy { width: 100%; max-width: 560px; justify-self: center; justify-items: center; text-align: center; gap: var(--s-4); }
  .hero__copy h1, .hero--svc .hero__copy h1 { font-size: var(--d-h1-phone); line-height: 0.96; text-wrap: balance; }
  .hero__copy .lede { max-width: 30ch; font-size: var(--t-lg); line-height: var(--lh-lg); }
  .hero__copy > .label { display: inline-block; padding: var(--s-2) var(--s-4); max-width: 100%; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; line-height: 1.3; letter-spacing: 0.08em; color: var(--sc-ink-soft); text-align: center; text-wrap: balance; }
  .nb { white-space: nowrap; }
  .hero__copy > .label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--yellow); vertical-align: 1px; }
  .hero__ctas { align-items: center; width: 100%; margin-top: var(--s-2); }
  .hero__ctas .btn, .hero__ctas .btn--lg { width: auto; justify-content: center; font-size: var(--t-base); line-height: 1; box-sizing: border-box; min-height: 48px; padding: var(--s-3) var(--s-6); box-shadow: 4px 4px 0 var(--btn-shadow); } /* 48px border included, same as the floating pill */
  .hero__under { display: none; }
  .hero__chips { display: none; } /* fora: nothing under the button; the promises live in the plates */
  /* -- section grammar: label, heading and text on the left, one reading axis -- */
  .stack__head, .zone__head, .faq__head, .fly__head, .dm__head, .rail__lead { text-align: left; justify-items: start; }
  .fly__head .body, .dm__head .body { text-align: left; }
  .stack__head .stack__intro, .zone__head .body { margin-inline: 0; }
  .tag { padding-block: var(--s-16); }
  .tag p { text-align: left; font-size: clamp(1.625rem, 7.4vw, 2rem); line-height: 1.2; max-width: none; }
  /* -- plates: visual on top, then label, title, text; 24px inside; no pinning -- */
  .stack, .stack--svc { padding-top: var(--s-6); }
  .stack__head { padding-bottom: var(--s-8); }
  .plate { position: static; min-height: 0; transform: none; width: min(100% - 2 * var(--gutter), 560px); padding: var(--s-6); border-radius: 24px; box-shadow: var(--sc-edge); }
  .plate::after { display: none; }
  .plate__medal { display: none; }
  .plate + .plate, .stack--svc .plate + .plate { margin-top: var(--s-4); }
  .plate__grid, .plate__grid--full { grid-template-columns: 1fr; gap: var(--s-4); }
  .plate__art { order: -1; }
  .plate__art .il, .plate__art .art-duo, .hero[data-svc="pieces"] .plate__art .il { max-width: 260px; width: auto; margin-inline: auto; }
  .plate__art .il svg { max-height: 140px; width: auto; max-width: 100%; }
  .plate__copy, .plate__grid--full .plate__copy { gap: var(--s-3); }
  .plate__copy h2, .plate__copy h3 { font-size: clamp(1.625rem, 7.4vw, 2rem); }
  .plate .lede { font-size: 1rem; line-height: 1.45; max-width: none; }
  .plate__points { gap: var(--s-2); }
  .plate__points li { font-size: 1rem; line-height: 1.35; }
  .plate__points svg { width: 20px; height: 20px; margin-top: 1px; }
  .plate__note { display: none; }
  .plate .chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .plate .chips li { justify-content: center; text-align: center; padding: 10px 8px; font-size: 0.9rem; line-height: 1.25; }
  .plate .chips li::before { display: none; }
  .plate .brands { grid-template-columns: repeat(3, 1fr); }
  .plate .brands li { font-size: 12px; padding: 8px 4px; min-height: 36px; }
  .plate__cta { width: 100%; }
  .stack__spacer { height: var(--s-4); }
  /* -- steps: the same card anatomy, stacked -- */
  .steps[data-sc-act="flow"] .rail { display: grid; height: auto; padding: var(--s-16) var(--gutter) var(--s-6); gap: var(--s-4); }
  .steps[data-sc-act="flow"] .rail > * { width: auto; min-width: 0; margin: 0; }
  .steps[data-sc-act="flow"] .rail__lead { gap: var(--s-3); margin-bottom: var(--s-2); }
  .steps[data-sc-act="flow"] .step { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: var(--s-2); padding: var(--s-6); border-radius: 24px; }
  .steps[data-sc-act="flow"] .step__art { margin-bottom: var(--s-3); background: transparent; }
  .steps[data-sc-act="flow"] .step__art .il { max-width: 140px; margin-inline: auto; }
  .steps[data-sc-act="flow"] .step h3 { font-size: 1.5rem; line-height: 1; margin: 0; }
  .steps[data-sc-act="flow"] .step p { line-height: 1.45; font-size: 1rem; }
  .steps[data-sc-act="flow"] .rail__tail { padding: var(--s-8) 0 0; margin-top: var(--s-4); border: 0; gap: var(--s-3); }
  .steps[data-sc-act="flow"] .rail__end { display: none; }
  /* -- scenes: one resolved frame, in a rounded panel like the cards -- */
  .is-static .dm__stage, .is-static .fly__stage { height: auto; min-height: 0; padding: var(--s-16) 0 var(--s-4); grid-template-rows: auto auto; }
  .is-static .dm__head, .is-static .fly__head { padding-inline: var(--gutter); }
  .is-static .dm__box, .is-static .fly__box { margin: var(--s-6) auto 0; width: min(100% - 2 * var(--gutter), 560px); max-width: none; border-radius: 24px; background: var(--sc-surface); border: 1px solid var(--line); overflow: clip; --il-paper: var(--sc-surface); }
  .is-static .dm__end, .is-static .fly__end, .is-static .tow__end { display: none; }
  /* -- reviews: one card at a time, arrows and dots -- */
  .reviews-act.is-flow .fly__stage { padding-block: var(--s-16) var(--s-8); gap: var(--s-4); }
  .reviews-act.is-flow .fly__end { display: none; }
  .reviews-act.is-flow .fly__box { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3); width: 100%; max-width: none; margin: var(--s-4) 0 0; padding: 4px var(--gutter) var(--s-3); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .reviews-act.is-flow .fly__box::-webkit-scrollbar { display: none; }
  .reviews-act.is-flow .review { flex: 0 0 calc(100% - var(--s-2)); scroll-snap-align: center; padding: var(--s-6); } /* the track is already the column: card = column - 8px, the next one peeks 20px like fora */
  .rv-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-inline: var(--gutter); margin-top: var(--s-2); max-width: 600px; margin-inline: auto; width: 100%; }
  .rv-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--sc-ink); display: grid; place-items: center; padding: 0; cursor: pointer; }
  .rv-arrow:active { transform: scale(0.96); }
  .rv-arrow svg { width: 20px; height: 20px; }
  .rv-dots { display: flex; justify-content: center; gap: 2px; }
  .rv-dots button { width: 28px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
  .rv-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-ink-soft); opacity: 0.45; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), background-color 200ms var(--ease-out); }
  .rv-dots button.on::before { background: var(--yellow); opacity: 1; transform: scale(1.35); }
  /* -- zone: the cities run as a two-row ticker like the metals band (app.js builds it on phones) -- */
  .zone .cities.is-mq { display: none; }
  .cities-mq { width: 100vw; margin-inline: calc(-1 * var(--gutter)); }
  .cities-mq .mq__row span.home { background: var(--yellow); color: var(--ink-on-light); border-color: var(--yellow); }
  .cities-mq .mq__row span.home::before { background: var(--ink-on-light); }
  .zone { padding-block: var(--s-16) var(--s-8); } /* 32 + the next section's 64 = 96 between blocks */
  .zone__copy { gap: var(--s-8); }
  .zone__note { margin: 0; }
  /* -- FAQ, find, close, footer -- */
  .acc__q { padding: var(--s-4) var(--s-6); }
  .acc__a p { padding: 0 var(--s-6) var(--s-6); }
  .find__map, .find__map iframe { min-height: 260px; }
  .foot__brand p { display: none; }
  .close--v2 .foot { padding-top: var(--s-8); }
  .close--v2 .foot__hours { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-bottom: var(--s-1); }
  .close--v2 .foot__hours b::after { content: " :"; }
  .close--v2 .foot__grid { gap: var(--s-6); }
  /* -- tap targets and text sizes -- */
  .skip { min-height: 44px; }
  .menu a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .foot__col ul a, .foot__legal a { display: inline-block; padding: 12px 0; }
  .plate__cta .link, .rail__tail .link { display: inline-flex; align-items: center; min-height: 44px; }
  .label { font-size: 13px; }
  .review p, .review__text { font-size: 1rem; line-height: 1.5; }
  .acc__a p { font-size: 1rem; }
  .cities li { font-size: 13px; }
  .foot { font-size: 15px; }
  /* -- appear, as measured on fora (Framer): opacity 0→1 and 24px→0 over ~1s, half way at 170ms, no blur -- */
  :root { --ease-appear: cubic-bezier(0.33, 1, 0.68, 1); } /* fora, measured: 49% at 170ms, 82% at 330ms, 95% at 500ms, settled at ~800-1000ms */
  .js .rv, .js .rv-group > * { filter: none; transform: translate3d(0, 24px, 0); transition: opacity 1000ms var(--ease-appear), transform 1000ms var(--ease-appear); }
  .js .plate.rv { transition: opacity 1000ms var(--ease-appear), transform 1000ms var(--ease-appear); }
  .js .reviews-act .rv-group > .review { filter: none; translate: 0 24px; transition: opacity 1000ms var(--ease-appear), translate 1000ms var(--ease-appear); }
  .rv-group.in > :nth-child(2) { transition-delay: 60ms; } .rv-group.in > :nth-child(3) { transition-delay: 120ms; } .rv-group.in > :nth-child(4) { transition-delay: 180ms; } .rv-group.in > :nth-child(5) { transition-delay: 240ms; } .rv-group.in > :nth-child(6) { transition-delay: 300ms; } .rv-group.in > :nth-child(7) { transition-delay: 360ms; } .rv-group.in > :nth-child(8) { transition-delay: 420ms; }
  /* plates and steps carry !important resets from the tablet rules; on phones the appear wins until the block is in */
  .js .plate.rv:not(.in), .js .step.rv:not(.in) { opacity: 0 !important; transform: translate3d(0, 24px, 0) !important; }
  .js .plate.rv.in, .js .step.rv.in { opacity: 1 !important; transform: none !important; }
  .js .plate.rv, .js .step.rv { transition: opacity 1000ms var(--ease-appear), transform 1000ms var(--ease-appear) !important; }
  /* -- nothing works while the page scrolls: no backdrop blur, solid surfaces -- */
  .isl { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--sc-canvas) 96%, transparent); }
  .foot { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sc-canvas); }
  .cookie { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 640px) {
  .fly__box, .tow__box { max-width: 100%; }
}

/* ---------------------------- correctif 10 septembre: pas de défilement latéral sur mobile -- */
/* Les bandes défilantes (.mq__row, width: max-content) débordaient du document; sur iOS le
   overflow-x: clip du body ne suffit pas et la page se laissait glisser de côté. */
.mq { overflow: hidden; }
html { overflow-x: clip; }

/* ---------- correctif 10 septembre: la pastille d'appel flottante reprend le dessin exact du bouton du héros -- */
/* Même bordure jaune fondue dans le remplissage (le contour charbon lisait comme un vide derrière le bouton),
   même base dorée de 4 px, même hauteur, même police et même taille pour le verbe et le numéro. */
@media (max-width: 860px) {
  .callbar, .callbar.is-armed.on { border: 3px solid var(--btn-line); box-shadow: 4px 4px 0 var(--btn-shadow); background: var(--yellow); color: var(--ink-on-light); font-size: var(--t-base); line-height: 1; height: 48px; padding: 0 var(--s-6); }
  .callbar.is-armed.on:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--btn-shadow); }
}