/* ============================================================================
   offre.css - "Atelier digital" offer page.
   A modern landing for auto garages that makes two things unmistakable: it is
   about CARS / GARAGES (garage-explicit copy, automotive icons, road-lane
   dividers, a "fiche technique" sheet) and it is a DIGITAL service (the hero
   pairs the pitch with a live Google-search mockup + a browser window of the
   client's site, Space Mono UI, a blueprint grid). Cool carbon/steel base
   (asphalt and metal), a workshop-amber "ignition" accent for the garage
   voice, an electric-cyan signal for the digital voice. No frameworks;
   every drawing is inline SVG.
============================================================================ */

/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #0a0d12;            /* carbon / asphalt base, cool steel tint */
  --bg-2: #0d1118;          /* tinted section */
  --surface: #121822;       /* card face */
  --surface-2: #18202c;     /* raised / hover */
  --line: rgba(190, 215, 255, 0.10);
  --line-2: rgba(190, 215, 255, 0.17);
  --cream: #eef3f8;         /* cool near-white text */
  --muted: #a6b2bf;
  --dim: #717d8a;
  --amber: #ffa22e;         /* workshop amber / safety orange: the garage voice */
  --coral: #ff5d49;
  --gold: #f4c65a;
  --signal: #3fd9ff;        /* electric cyan: the digital voice (dots, caret, online) */
  --ink: #191006;           /* text on bright buttons */
  /* light "screen" surfaces for the digital mockups */
  --screen: #f4f6f8;
  --screen-2: #e9edf1;
  --screen-ink: #171c22;
  --screen-mut: #66707b;
  --screen-line: #d7dde4;
  /* the ignition ramp (workshop amber -> heat red), used with restraint */
  --torch: linear-gradient(96deg, #ffc46b 0%, #ff8c3b 48%, #ff5540 100%);
  --torch-soft: linear-gradient(96deg, #ffc46b, #ff7a45 55%, #ff5540);
  --shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9);
  --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --max: 1140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--cream);
  font: 400 16px/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--ink); }

img, svg { max-width: 100%; display: block; }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--gold); }

/* kill the 300ms double-tap wait so taps feel immediate */
a, button, summary, input, select { touch-action: manipulation; }

.hl { color: var(--cream); font-weight: 600; box-shadow: inset 0 -0.5em 0 rgba(255, 162, 46, 0.16); }

.grad {
  background: var(--torch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, .dd-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 800px; }

/* mono utility label (the "digital" voice): kickers, chips, meta */
.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* filmic grain */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- reveals */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 0;
  border-radius: 12px;
  font: 600 15px/1 var(--body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn--sm { padding: 11px 18px; font-size: 13.5px; border-radius: 10px; }

.btn--primary {
  background: var(--torch);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 12px 30px -12px rgba(255, 130, 40, 0.55);
}
.btn--primary:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(255, 130, 40, 0.68); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--cream); border: 1px solid var(--line-2); }
.btn--ghost:hover { color: var(--cream); border-color: var(--amber); background: rgba(255, 162, 46, 0.07); transform: translateY(-2px); }

/* ----------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(10, 13, 18, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.scrolled { background: rgba(10, 13, 18, 0.85); border-bottom-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand__logo { display: block; height: 40px; width: auto; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  isolation: isolate;
  /* Fill at least one viewport minus the sticky nav so the pitch and the
     search -> site demo land together. --nav-h is measured in offre.js. */
  min-height: calc(100vh - var(--nav-h, 60px));
  min-height: calc(100svh - var(--nav-h, 60px));
  display: flex;
  align-items: center;
  /* the real workshop at golden hour behind the pitch. Heavily graded
     toward the carbon base so text and cards stay readable, with a side
     vignette, fading to solid --bg at the bottom to hand over cleanly to
     the next section. The photo's amber light matches --torch by design. */
  background:
    linear-gradient(90deg, rgba(10, 13, 18, 0.55) 0%, rgba(10, 13, 18, 0) 30%, rgba(10, 13, 18, 0) 70%, rgba(10, 13, 18, 0.55) 100%),
    linear-gradient(180deg,
      rgba(10, 13, 18, 0.92) 0%,
      rgba(10, 13, 18, 0.78) 32%,
      rgba(10, 13, 18, 0.84) 64%,
      var(--bg) 97%),
    url("img/garage-hero.jpg") center 30% / cover no-repeat,
    var(--bg);
  overflow: hidden;
  /* tight vertical rhythm: the pitch and the full demo card should share
     one viewport whenever the screen height allows it */
  padding: clamp(20px, 3.5vh, 44px) 0;
}
.hero__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: clamp(22px, 3.5vh, 34px);
  align-items: center;
  text-align: center;
}
.hero__text { width: 100%; max-width: 560px; margin: 0 auto; }

/* Stacked layouts: land on a clean fold. Without this, the search card
   starts wherever the pitch happens to end and the first screen slices it
   mid-text (looked broken on phones). Instead the pitch gets the first
   screen to itself, centered, and the card keeps a controlled --peek above
   the fold. The 12px default only ever shows the card's rounded top edge
   (its label starts 18px in), so it is safe at ANY viewport height and is
   the no-JS behavior; offre.js (fitPitch) widens it to the nearest clean
   cut (under the search bar, or under the card's label) when the pitch
   leaves the room. When even the sliver doesn't fit, the box outgrows the
   min-height and the card simply sits below the fold. The two clamp()
   terms mirror .hero's padding-top and .hero__inner's gap (keep in sync):
   they cancel those out so the card's top lands at exactly 100svh - peek.
   svh, not vh: the pin must not move when mobile browser chrome
   collapses on scroll. */
@media (max-width: 899.98px) {
  .hero__text {
    min-height: calc(100vh - var(--nav-h, 66px) - clamp(20px, 3.5vh, 44px) - clamp(22px, 3.5vh, 34px) - var(--peek, 12px));
    min-height: calc(100svh - var(--nav-h, 66px) - clamp(20px, 3.5vh, 44px) - clamp(22px, 3.5vh, 34px) - var(--peek, 12px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* the proof row: Google-search card + browser window. Stacked on mobile,
   side by side under the pitch on wide screens (see min-width query below). */
.hero__visual {
  position: relative;
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
/* amber work-light halo behind the light mockups */
.hero__visual::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(52% 52% at 50% 50%, rgba(255, 150, 60, 0.10), transparent 72%);
}

@keyframes pulse { 50% { opacity: 0.35; } }

h1 {
  margin: 0 auto;
  max-width: 15ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.01em;
}
.hero__lead { margin: 10px auto 0; max-width: 520px; color: var(--muted); font-size: 16px; }

/* the free-month callout: impossible to miss */
.promo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 16px auto 0;
  padding: 11px 20px 11px 16px;
  max-width: 540px;
  text-align: left;
  border: 1px solid rgba(255, 162, 46, 0.38);
  border-radius: 16px;
  background: linear-gradient(96deg, rgba(255, 150, 60, 0.13), rgba(80, 160, 255, 0.09));
  box-shadow: 0 14px 40px -22px rgba(255, 130, 40, 0.45);
}
.promo__amount {
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 42px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: var(--torch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo__txt { display: flex; flex-direction: column; gap: 3px; }
.promo__txt strong { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0; color: var(--cream); }
.promo__txt span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.hero__cta { margin-top: 16px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__trust .stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }

/* the bridge line above the demo: real proof -> "your garage, free". This is
   the hook that makes the visitor project themselves into the demo. */
.hero__bridge {
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}
.hero__bridge strong { color: var(--cream); font-weight: 700; }

/* Wide screens: the two demo cards sit side by side under the pitch. */
@media (min-width: 900px) {
  .hero__visual {
    /* a clean, fixed-width panel: it stays contained rather than stretching
       to fill wide viewports (the full-size view lives in the click-to-expand
       viewer, see offre.js). */
    max-width: 1080px;
    /* browser column wider than the search card so the embedded site gets a
       desktop-like viewport, but not so wide the Google mock feels cramped */
    grid-template-columns: 0.72fr 1.28fr;
    gap: 24px 24px;
    align-items: center;
  }
}

/* ---- demo layout choreography (class added by offre.js only when the demo
   runs). Wide screens: the grid keeps its two static columns the whole
   time. Pre-split, the search card is simply translated to the container's
   center (~92% of its own width, near-constant across sizes: with 0.72fr/1.28fr
   columns and a 24px gap, offset = (W - serpCol) / 2 where
   serpCol = (W - 24) * 0.36, i.e. 92.0% at W=1080 up to 92.7% at the 900px
   floor; recompute if the ratio, gap, or max-width changes) and the
   browser panel is hidden; the split is then a pure transform slide: no
   track resizing, no width change, no text rewrap. Stacked screens (phones,
   small tablets): no split at all. Both cards stay in flow; the browser is
   hidden until the demo's click lands (.is-split), then slides in and
   lights up (see the stacked rules in the 899.98px block further down).
   Without JS both layouts are static and complete. */

/* The demo'd cards' resting pose must NOT come from the entrance
   animation's forwards fill: offre.js strips those animations at the split,
   and the cards would fall back to the entrance rule's opacity: 0 and
   vanish. fill-mode: both keeps them hidden during the entrance delay too. */
.hero__visual--demo .serp,
.hero__visual--demo .browser { opacity: 1; animation-fill-mode: both; }

@media (min-width: 900px) {
  .hero__visual--demo .serp {
    transform: translateX(92%);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    animation-name: cardInCenter; /* entrance plays at the centered spot */
  }
  .hero__visual--demo .browser {
    opacity: 0;
    visibility: hidden;
    transform: translateX(48px);
    animation: none; /* skips cardIn: the split is its entrance */
    transition: opacity 0.5s ease 0.25s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s, visibility 0s 0.8s;
  }
  .hero__visual--demo.is-split .serp { transform: none; }
  .hero__visual--demo.is-split .browser {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.5s ease 0.25s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
  }
}
@keyframes cardInCenter {
  from { opacity: 0; transform: translateX(92%) translateY(30px) scale(0.985); }
  to   { opacity: 1; transform: translateX(92%); }
}

/* ==========================================================================
   ENTRANCE : the hero stages itself in on arrival. Pure CSS, and only
   inside the no-preference media query (reduced motion skips it all).
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .nav { animation: navIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards; }

  /* hero choreography: each piece slides out of a blur, staggered
     (h1 -> lead -> promo -> cta -> trust) */
  .hero__text > * {
    opacity: 0;
    animation: stageIn 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .hero__text > :nth-child(1) { animation-delay: 0.15s; }
  .hero__text > :nth-child(2) { animation-delay: 0.24s; }
  .hero__text > :nth-child(3) { animation-delay: 0.33s; }
  .hero__text > :nth-child(4) { animation-delay: 0.42s; }
  .hero__text > :nth-child(5) { animation-delay: 0.51s; }
  /* the two demo cards rise (no blur: cheaper over the live iframe) */
  .hero__visual > figure {
    opacity: 0;
    animation: cardIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .hero__visual > figure:nth-of-type(1) { animation-delay: 0.62s; }
  .hero__visual > figure:nth-of-type(2) { animation-delay: 0.76s; }
  /* one light sweep across the headline gradient as everything settles */
  .hero h1 .grad { background-size: 230% 100%; animation: gradSweep 1.1s ease-out 0.7s backwards; }
}
@keyframes navIn {
  from { transform: translateY(-110%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes stageIn {
  from { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes gradSweep {
  from { background-position: 115% 0; }
  to   { background-position: 0% 0; }
}

/* ==========================================================================
   CUSTOM CURSOR : an amber dot with a trailing ring (added by offre.js on fine
   pointers when motion is allowed). The ring turns cyan and grows over
   anything clickable; form fields and the embedded site keep the native
   cursor. Touch devices and no-JS never get any of this.
========================================================================== */
.has-cursor body,
.has-cursor a,
.has-cursor button,
.has-cursor .btn,
.has-cursor summary,
.has-cursor .dd-btn,
.has-cursor .dd-opt,
.has-cursor .contact { cursor: none; }

.cur-dot, .cur-ring {
  position: fixed;
  left: 0; top: 0;
  z-index: 130;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.25s ease;
}
.cursor-on .cur-dot, .cursor-on .cur-ring { opacity: 1; }
/* hidden over inputs / the live site, where the native cursor makes sense */
.cursor-native .cur-dot, .cursor-native .cur-ring { opacity: 0; }
.cur-dot::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(255, 162, 46, 0.8);
  transition: transform 0.18s ease;
}
.cur-ring::after {
  content: "";
  display: block;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 162, 46, 0.6);
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease, background-color 0.25s ease;
}
/* over something clickable: the ring grows and flips to the digital cyan */
.cursor-hot .cur-ring::after { transform: scale(1.45); border-color: var(--signal); background: rgba(63, 217, 255, 0.08); }
.cursor-hot .cur-dot::after { transform: scale(0.6); }
/* press feedback */
.cursor-down .cur-ring::after { transform: scale(0.85); }
.cursor-down .cur-dot::after { transform: scale(1.5); }

.cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.3s ease;
}
.cue svg { width: 20px; stroke: var(--amber); fill: none; stroke-width: 2; animation: cueBob 1.6s ease-in-out infinite; }
.cue.hidden { opacity: 0; pointer-events: none; }
@keyframes cueBob { 50% { transform: translateY(4px); } }

/* -------------------------------------------------------------- sections */
.section { padding: clamp(52px, 6.5vw, 84px) 0; }
.section--tint {
  background-color: var(--bg-2);
  background-image:
    linear-gradient(rgba(190, 215, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 215, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber);
}
.kicker::before { content: "//"; color: var(--dim); }

.section .container > h2,
.lead h2 {
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--cream);
  max-width: 20ch;
}
.sub { margin-top: 16px; max-width: 62ch; color: var(--muted); font-size: 16.5px; }

/* section divider: a discreet amber hairline that fades to transparent at
   both ends, with a barely-there warm bloom so the seam reads as a soft
   transition rather than a hard line. No focal accent. */
.divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 162, 46, 0.22), transparent);
}
.divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, 76%);
  height: 84px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 150, 60, 0.05), transparent);
  pointer-events: none;
}

/* ============================================================================
   HERO PROOF MOCKUPS : the Google search -> the client's site
============================================================================ */
.mock-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock-label b {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--torch);
  color: var(--ink);
  font: 700 11px/1 var(--mono);
}
/* the serp card's own 18px padding insets its label; the browser card has
   none (its bar must touch the edges), so inset the label to match */
.browser > .mock-label { margin: 18px 18px 12px; }

/* Google search result card (light "screen") */
.serp {
  position: relative; /* anchors the demo cursor */
  background: var(--screen);
  border: 1px solid var(--screen-line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  color: var(--screen-ink);
}
.serp__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--screen-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--body);
  font-size: 14px;
  color: var(--screen-ink);
}
.serp__search svg { width: 16px; height: 16px; flex: none; stroke: var(--screen-mut); fill: none; stroke-width: 2; }
/* the empty bar (demo armed, nothing typed yet) must keep the exact height
   of the typed line: the card's geometry feeds fitPitch's fold pin and must
   not grow when the demo starts typing. 1em is the pre-lh fallback. */
.serp__q { min-height: 1em; min-height: 1lh; }
.serp__caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 1px;
  background: var(--coral);
  vertical-align: -3px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.serp__results { margin-top: 16px; }
.serp__result { padding: 0 4px; }
.serp__meta { display: flex; align-items: center; gap: 8px; }
.serp__ad {
  font: 700 11px/1 var(--body);
  color: #1b7a3e;
  border: 1px solid #bfe3c9;
  background: #eaf7ee;
  padding: 3px 7px;
  border-radius: 5px;
}
/* the prospect's own garage, stuck in position 2: dimmed on purpose */
.serp__you {
  font: 700 11px/1 var(--body);
  color: #6b7480;
  border: 1px solid #d7dde4;
  background: #eef1f4;
  padding: 3px 7px;
  border-radius: 5px;
}
/* the prospect's result stays greyer/duller than the vivid ad above (grey
   title vs the blue ad title), but readable: dullness comes from the greys,
   not from a heavy fade. */
.serp__result--second {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--screen-line);
  opacity: 0.9;
}
.serp__result--second .serp__title { color: #45505c; font-size: 16px; }
.serp__result--second .serp__desc { color: #4c5661; }
.serp__note {
  margin: 16px 4px 0;
  padding-top: 12px;
  border-top: 1px dashed var(--screen-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4a5560;
}
.serp__note strong { color: #1a4bd8; }
.serp__url { font-size: 13px; color: var(--screen-mut); }
.serp__title {
  display: block;
  margin: 8px 0 4px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 18px;
  color: #1a4bd8;
}
.serp__rating { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--screen-mut); }
.serp__rating .st { color: #f0a020; letter-spacing: 1px; }
.serp__desc { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: #4a4640; }

/* ---- demo scenario states (the *--demo classes are added by offre.js only
   when the animation will actually run; otherwise the mockup stays static
   and complete: result shown, site shown, no cursor) ---------------------- */

/* the results only exist once the query has been typed (layout space kept) */
.serp--demo .serp__results {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s;
}
.serp--demo .serp__results.is-in {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
/* clicked link: Google's visited purple + underline */
.serp--demo .serp__result.is-click .serp__title { color: #681da8; text-decoration: underline; }

/* the "visitor" cursor gliding to the ad */
.serp__cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  width: 22px; height: 22px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.25s ease; /* smooth exit when .is-live drops */
}
.serp__cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #1b1822; stroke-width: 1.4; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)); }
.serp__cursor.is-live { opacity: 1; transition: transform 0.95s cubic-bezier(0.3, 0.65, 0.25, 1), opacity 0.25s ease; }
.serp__cursor.is-press svg { transform: scale(0.82); transform-origin: 28% 18%; transition: transform 0.12s ease; }
/* click ripple, centered on the pointer tip */
.serp__cursor::after {
  content: "";
  position: absolute;
  left: -9px; top: -10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(26, 75, 216, 0.55);
  opacity: 0;
  transform: scale(0.3);
}
.serp__cursor.is-press::after { animation: clickRipple 0.45s ease-out; }
@keyframes clickRipple {
  from { opacity: 0.9; transform: scale(0.3); }
  to   { opacity: 0;   transform: scale(1.5); }
}

/* on touch screens the demo "visitor" is a fingertip, not a mouse arrow:
   offre.js swaps the gliding cursor for a single tap on the ad (the --tap
   class is set at demo init on coarse pointers) */
.serp__cursor--tap { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.serp__cursor--tap svg { display: none; }
/* a tap appears in place: never glide the dot across the card (is-live's
   transform transition would otherwise animate it in from the corner) */
.serp__cursor--tap, .serp__cursor--tap.is-live { transition: opacity 0.25s ease; }
.serp__cursor--tap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(23, 28, 34, 0.28);
  border: 1px solid rgba(23, 28, 34, 0.14);
  transition: transform 0.15s ease;
}
.serp__cursor--tap.is-press::before { transform: scale(0.78); }
/* recenter the click ripple on the fingertip */
.serp__cursor--tap::after { left: 50%; top: 50%; margin: -14px 0 0 -14px; }

/* Browser window with the garage site (light "screen") */
.browser {
  background: var(--screen);
  border: 1px solid var(--screen-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.browser__bar {
  position: relative; /* anchors the demo loading bar */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--screen-2);
  border-bottom: 1px solid var(--screen-line);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8bc; }
.browser__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--screen-line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--screen-mut);
}
.browser__url:hover { color: var(--screen-ink); }
.browser__url svg { width: 12px; height: 12px; stroke: #2ba05a; fill: none; stroke-width: 2; }
/* the real client site (autodetail.ch), embedded live: scroll it, click it.
   The screenshot sits underneath as the loading placeholder. */
.browser__screen {
  position: relative;
  display: block;
  background: #0a0a0b;
  /* Tall, phone-like window. Fallback height only: on wide screens offre.js
     resizes it to the exact space left under the pitch (430px floor,
     700px cap). */
  height: clamp(430px, 72vh, 700px);
  overflow: hidden; /* clips the embedded site's scrollbar (see --sbw) */
}
/* stacked layouts: CSS owns the height (fitDemo stands down below 900px).
   A tall, phone-like window that still leaves the card's CTA within the
   same screen. */
@media (max-width: 899.98px) {
  .browser__screen { height: clamp(430px, 66vh, 560px); height: clamp(430px, 68svh, 560px); }
  /* when the demo drives this layout the hint waits for .is-on like on wide
     screens; without the demo (reduced motion) the site is shown complete
     from the start, so reveal the "explore" hint right away too.
     (.js beats the base .browser__open-hint opacity:0 declared further down.) */
  .js .browser:not(.browser--demo) .browser__open-hint { opacity: 1; transform: none; }

  /* The site panel is "created" by the demo's simulated tap: while the demo
     is still typing or gliding the cursor toward the ad, the panel must not
     exist. .is-split lands exactly when the simulated click completes
     (offre.js), so it doubles as the reveal: hidden before, slides in at
     the click, then lights up (URL, loading bar, site). offre.js skips the
     browser's inline animation release on stacked layouts so this entrance
     can play. No-JS and reduced motion never get the --demo classes and
     show the complete mock from the start. */
  .hero__visual--demo:not(.is-split) .browser { display: none; }
  .hero__visual--demo.is-split .browser { animation: siteReveal 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes siteReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.browser__shot,
.browser__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.browser__shot { object-fit: cover; object-position: top; }
/* wider by exactly the OS scrollbar width (--sbw, measured in offre.js), so the
   embedded site's scrollbar is pushed outside the clipped window */
.browser__frame { border: 0; background: #0a0a0b; width: calc(100% + var(--sbw, 0px)); }

/* ---- click-to-open preview: the hero site is a non-interactive teaser. The
   .browser__open button (added in the markup, JS-only) covers the frame and
   opens the full-size viewer on click/tap; the frame itself ignores the
   pointer so a swipe just scrolls the page and every click reaches the button.
   The real navigation happens in the viewer (see offre.js). */
.browser__frame { pointer-events: none; }
.browser__open { display: none; }
.js .browser__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* a scrim that fades up on hover to signal the whole site is clickable */
.browser__open::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 100%, rgba(8, 11, 16, 0.62), rgba(8, 11, 16, 0.12) 55%, transparent 78%);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.browser__open-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(12, 16, 22, 0.82);
  border: 1px solid rgba(238, 243, 248, 0.2);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.browser__open-hint svg { width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* reveal the hint once the site is actually shown (or immediately when there's
   no demo, i.e. reduced motion); hidden during the loading choreography. */
.browser.is-on .browser__open-hint { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .browser__open-hint { opacity: 1; transform: none; }
}
/* fine pointers: hovering the preview darkens it and lights the hint up */
.browser.is-on .browser__open:hover::before,
.browser__open:focus-visible::before { opacity: 1; }
.browser.is-on .browser__open:hover .browser__open-hint,
.browser__open:focus-visible .browser__open-hint {
  opacity: 1;
  transform: none;
  background: var(--torch);
  border-color: transparent;
  color: var(--ink);
}
.browser__open:hover .browser__open-hint svg,
.browser__open:focus-visible .browser__open-hint svg { stroke: var(--ink); }

/* ---- demo scenario states: an empty tab until the ad is clicked ---------- */
.browser--demo { transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease; }
.browser--demo .browser__url-txt,
.browser--demo .browser__url svg { opacity: 0; transition: opacity 0.3s ease; }
.browser--demo .browser__shot,
.browser--demo .browser__frame {
  opacity: 0;
  visibility: hidden; /* also keeps the hidden iframe from catching scrolls */
  transition: opacity 0.55s ease, visibility 0s 0.55s;
}
/* click -> the URL shows up and the page starts loading */
.browser--demo.is-loading .browser__url-txt,
.browser--demo.is-on .browser__url-txt,
.browser--demo.is-loading .browser__url svg,
.browser--demo.is-on .browser__url svg { opacity: 1; }
.browser__load {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--torch);
  opacity: 0;
  z-index: 1;
}
.browser--demo.is-loading .browser__load { opacity: 1; width: 100%; transition: width 0.75s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.15s ease; }
/* -> the site is on screen (and stays usable); the card lights up */
.browser--demo.is-on .browser__shot,
.browser--demo.is-on .browser__frame {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease;
}
.browser--demo.is-on {
  border-color: rgba(255, 162, 46, 0.4);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9), 0 0 36px -8px rgba(255, 150, 60, 0.38);
  transform: translateY(-3px);
}
/* while the demo holds the site back, the dark screen reads as a waiting
   "new tab" page (the beat between the click and the site coming on, on
   both layouts); it fades away once the site is on */
.browser--demo .browser__screen::before {
  content: "nouvel onglet";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 243, 248, 0.28);
  transition: opacity 0.4s ease;
}
.browser--demo.is-on .browser__screen::before { opacity: 0; }

/* ---- projection CTA attached to the card bottom: an on-card cue that is also
   the button. Same destination as the hero CTA (#lead), so admiring the demo
   and asking for the same site are one motion, in the same spot. */
.browser__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  background: var(--torch);
  color: var(--ink);
  transition: filter 0.25s ease;
}
.browser__cta:hover { color: var(--ink); filter: brightness(1.06); }
.browser__cta-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.28; }
.browser__cta-txt b { font-family: var(--display); font-weight: 700; font-size: 14px; }
.browser__cta-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(25, 16, 6, 0.72);
}
.browser__cta-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(25, 16, 6, 0.16);
  font-size: 19px;
  font-weight: 700;
  transition: transform 0.25s ease;
}
.browser__cta:hover .browser__cta-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------- cards */
.cards { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); }
.card__ico {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: rgba(255, 162, 46, 0.1);
  border: 1px solid rgba(255, 162, 46, 0.22);
  color: var(--amber);
}
.card__ico svg { width: 26px; height: 26px; }
.card h3 { margin: 18px 0 9px; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: 0; color: var(--cream); }
.card p { color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- team */
.team { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.team__card { display: flex; align-items: center; gap: 18px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.team__card:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); }
.team__avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--torch-soft); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 22px; }
.team__info h3 { margin: 0 0 3px; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--cream); }
.team__role { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.35; min-height: 2.7em; }

/* --------------------------------------------------------------- steps */
.steps { margin-top: 48px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { position: relative; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.step__head { display: flex; align-items: center; justify-content: space-between; }
.step__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--torch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__ico { width: 30px; height: 30px; color: var(--amber); opacity: 0.85; }
.step__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { margin: 16px 0 9px; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--cream); }
.step p { color: var(--muted); font-size: 15px; }

.note {
  margin-top: 40px;
  padding: 22px 26px;
  background: rgba(255, 162, 46, 0.06);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 12px;
  color: var(--muted);
  font-size: 15.5px;
}
.note strong { color: var(--cream); }

/* -------------------------------------------------------- spec / fiche */
.spec { margin-top: 44px; list-style: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.spec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--line);
}
.spec__row:last-child { border-bottom: 0; }
.spec__k { flex: 1 1 200px; min-width: 0; color: var(--cream); font-size: 15.5px; }
.spec__v {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber);
}
.spec__v::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--torch);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/72% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/72% no-repeat;
}

/* -------------------------------------------------------------- reviews */
.rating { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--muted); font-family: var(--mono); font-size: 13px; }
.rating__stars { color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.reviews { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 20px; }
.review { display: flex; flex-direction: column; padding: 28px 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.review__stars { color: var(--gold); font-size: 17px; letter-spacing: 2px; }
.review blockquote { margin: 14px 0 14px; font-size: 17px; line-height: 1.55; color: var(--cream); }
/* Equal-height cards: with JS on, each quote is clamped to the same number
   of lines (min-height lifts short reviews to match the tall ones); the cards
   never change height, and "Lire la suite" opens the full review in a window.
   With JS off, the full text shows and nothing is clamped. */
.js .review blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  min-height: calc(4 * 1.55em);
}
.review__toggle { display: none; }
.js .review__toggle {
  display: block;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 8px 12px 8px 0; /* a finger-sized target, not just the text */
  background: none;
  border: 0;
  color: var(--amber);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.js .review__toggle:hover { color: var(--gold); }
/* short reviews that don't overflow keep the toggle's row (invisible) so the
   three cards stay the same height */
.js .review__toggle.is-static { visibility: hidden; }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 13px; font-size: 13px; color: var(--dim); }
.review figcaption strong { color: var(--cream); font-weight: 600; }
.avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--torch-soft); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; }
.reviews__cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* full-review window, opened from a card's "Lire la suite" (offre.js) */
body.no-scroll { overflow: hidden; } /* set while the window is open */
.rev-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 9, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.rev-modal.open { opacity: 1; pointer-events: auto; }
.rev-modal__card {
  position: relative;
  width: min(640px, 100%);
  max-height: 85vh;
  max-height: 85svh;
  overflow-y: auto;
  overscroll-behavior: contain; /* a long review must not scroll the page */
  padding: 34px 34px 30px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  box-shadow: var(--shadow);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rev-modal.open .rev-modal__card { transform: none; }
.rev-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rev-modal__close:hover { color: var(--cream); border-color: var(--line-2); background: rgba(255, 255, 255, 0.07); }
.rev-modal__card .review__stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; padding-right: 44px; }
.rev-modal__text { margin: 16px 0 22px; font-size: 16.5px; line-height: 1.6; color: var(--cream); }
.rev-modal__author { display: flex; align-items: center; gap: 13px; font-size: 13px; color: var(--dim); }
.rev-modal__author strong { color: var(--cream); font-weight: 600; }

/* ------------------------------------------------ full-size site viewer */
/* The ⤢ button that opens the viewer, sitting at the end of the hero
   browser bar. Matches the light "screen" chrome around it. */
.browser__expand {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--screen-line);
  color: var(--screen-mut);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.browser__expand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.browser__expand:hover { color: var(--screen-ink); border-color: #b9c2cc; background: #fbfcfd; }
/* the fake browser chrome is a click-to-enlarge target (offre.js). Only show a
   native pointer when the custom cursor is off, otherwise the two would stack. */
:root:not(.has-cursor) .browser__bar { cursor: pointer; }

/* full-screen overlay; sits above the custom cursor (z 130) so it fully
   occludes it and the native cursor takes over inside. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vh, 18px);
  background: rgba(6, 9, 13, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.viewer.open { opacity: 1; pointer-events: auto; }
.viewer__window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* fill most of the viewport: only a small breathing margin (the overlay
     padding), capped so it doesn't get absurd on ultrawide/very tall screens */
  max-width: 1700px;
  height: 94vh;
  height: 94svh;
  background: var(--screen);
  border: 1px solid var(--screen-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.viewer.open .viewer__window { transform: none; }
/* Mobile mode: pin the window to a phone width so the embedded site renders its
   own mobile layout (a plain iframe reads the frame width, not the device), and
   to a phone-tall height so it reads as a phone instead of a long thin column.
   The flex overlay keeps it centered. */
.viewer__window.is-mobile {
  max-width: 390px;
  height: min(94vh, 844px);
  height: min(94svh, 844px);
}
.viewer__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--screen-2);
  border-bottom: 1px solid var(--screen-line);
}
.viewer__dots { display: flex; gap: 6px; flex: none; }
.viewer__dots i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8bc; }
.viewer__url {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--screen-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.viewer__toggle {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--screen-line);
  color: var(--screen-mut);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.viewer__toggle:hover { color: var(--screen-ink); border-color: #b9c2cc; }
.viewer__toggle.is-active { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.viewer__btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--screen-line);
  color: var(--screen-mut);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.viewer__btn:hover { color: var(--screen-ink); border-color: #b9c2cc; }
#viewerClose:hover { color: #d0392b; border-color: #f0a9a2; }
.viewer__stage { position: relative; flex: 1; background: #0a0a0b; overflow: hidden; }
.viewer__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0a0a0b; }
.viewer__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--screen-mut);
  background: var(--screen);
}
/* the overlay covers the custom cursor, but its own controls still need a
   real pointer (beats the .has-cursor `cursor: none` rules by specificity) */
.has-cursor .viewer { cursor: auto; }
.has-cursor .viewer__toggle,
.has-cursor .viewer__btn { cursor: pointer; }

/* ------------------------------------------------------------------ faq */
.faq { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 22px 44px 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px; top: 24px;
  width: 16px; height: 16px;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 44px 24px 0; color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------------------ lead */
.lead { position: relative; overflow: hidden; }
.lead__glow {
  position: absolute;
  left: 50%; bottom: -40%;
  width: 120%; height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 100%, rgba(255, 130, 40, 0.13), transparent 70%);
  pointer-events: none;
}
.lead__title { max-width: 18ch; }
.lead__grid { position: relative; margin-top: 40px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; }

.form { padding: 30px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-field { display: block; margin-bottom: 15px; }
.f-label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.f-label em { font-style: normal; text-transform: none; color: var(--dim); }
.f-field input {
  width: 100%;
  padding: 14px 15px;
  background: rgba(7, 10, 15, 0.6);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--cream);
  font: 15px var(--body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.f-field input::placeholder { color: var(--dim); }
.f-field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 162, 46, 0.14); }
.hp { position: absolute; left: -9999px; }

.f-select { position: relative; display: block; }
.f-select select { width: 100%; padding: 14px 15px; background: rgba(7, 10, 15, 0.6); border: 1px solid var(--line-2); border-radius: 11px; color: var(--cream); font: 15px var(--body); }
.f-select.dd-ready select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-btn {
  position: relative;
  width: 100%;
  padding: 14px 46px 14px 15px;
  text-align: left;
  background: rgba(7, 10, 15, 0.6);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--cream);
  font: 15px var(--body);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.dd-btn:hover { border-color: var(--amber); }
.dd-btn::after { content: ""; position: absolute; right: 16px; top: 50%; width: 11px; height: 11px; transform: translateY(-60%) rotate(45deg); border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); }
.dd-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #151c27; border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; display: none; }
.f-select.open .dd-list { display: block; }
.dd-opt { padding: 11px 12px; border-radius: 7px; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.dd-opt.is-active { background: rgba(255, 162, 46, 0.12); color: var(--cream); }
.dd-opt[aria-selected="true"] { color: var(--cream); font-weight: 600; }

.btn--send { width: 100%; margin-top: 8px; }
.status { min-height: 1.4em; margin-top: 14px; font-family: var(--mono); font-size: 12.5px; }
.status.is-pending { color: var(--amber); }
.status.is-ok { color: var(--signal); }
.status.is-err { color: var(--coral); }

.aside { display: grid; gap: 14px; align-content: start; }
.contact { display: block; width: 100%; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.contact:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.contact--static, .contact--static:hover { cursor: default; transform: none; background: var(--surface); border-color: var(--line); }
.contact__k { display: block; margin-bottom: 11px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dim); }
.contact.copied .c-copy-key { color: var(--signal); }
.contact__mail { display: block; font-family: var(--mono); font-size: 17px; letter-spacing: 0.04em; color: var(--amber); word-break: break-all; }
/* Space Mono's "@" is a dense blob at this size; render just it in the body font (Inter) so the address stays legible. */
.contact__at { font-family: var(--body); font-weight: 600; font-size: 1.12em; letter-spacing: 0; }
.contact__v { display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--cream); }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px var(--signal); animation: pulse 2.4s ease-in-out infinite; }

/* phone number: clean and prominent, on the dark theme (no plate gimmick) */
.contact__num { display: block; font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: 0.5px; color: var(--cream); transition: color 0.25s ease; }
.contact:hover .contact__num { color: var(--amber); }

/* ---------------------------------------------------------------- footer */
.foot { padding: 30px 0; border-top: 1px solid var(--line); background: #080b10; color: var(--dim); font-family: var(--mono); font-size: 12px; }
.foot__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.foot__brand { display: inline-flex; align-items: center; gap: 12px; }
.foot__logo { display: block; height: 30px; width: auto; }
.foot__mid { letter-spacing: 0.03em; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--amber); }

/* ------------------------------------------------------- done modal */
.done { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(6, 9, 13, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.done.open { opacity: 1; pointer-events: auto; }
.done__card { width: min(400px, 100%); padding: 38px 32px 32px; text-align: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow); transform: translateY(14px) scale(0.96); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.done.open .done__card { transform: none; }
.done__check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--torch); color: var(--ink); box-shadow: 0 10px 30px -8px rgba(255, 130, 40, 0.55); }
.done__check svg { width: 32px; height: 32px; }
.done__title { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--cream); }
.done__sub { margin: 10px 0 24px; color: var(--muted); font-size: 15px; }

/* Booking step inside the confirmation card (revealed by offre.js) */
.book { margin: 2px 0 18px; text-align: left; }

/* month calendar */
.cal { margin-bottom: 6px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal__month { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream); }
.cal__nav {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  font-size: 17px; line-height: 1; color: var(--cream);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.cal__nav:hover:not(:disabled) { border-color: var(--amber); }
.cal__nav:disabled { opacity: 0.3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { text-align: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--dim); padding-bottom: 2px; }
.cal__cell { aspect-ratio: 1 / 1; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; border-radius: 8px; }
.cal__cell--pad { visibility: hidden; }
.cal__day { color: var(--cream); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.cal__day.is-off { color: var(--dim); background: transparent; border-color: transparent; opacity: 0.4; cursor: default; }
button.cal__day:hover { border-color: var(--amber); }
.cal__day.is-selected { background: var(--torch); color: var(--ink); border-color: transparent; }

/* time slots for the chosen day */
.book__times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-height: 120px; overflow-y: auto; }
.book__time {
  font-family: var(--mono); font-size: 13px; padding: 8px 12px;
  color: var(--cream); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.book__time:hover { border-color: var(--amber); }
.book__time[aria-pressed="true"] { background: var(--torch); color: var(--ink); border-color: transparent; }
.book__confirm { margin-top: 16px; width: 100%; }
.book__status { margin: 10px 0 0; min-height: 1em; font-family: var(--mono); font-size: 12px; }
.book__status.is-pending { color: var(--muted); }
.book__status.is-err { color: #ff6b5e; }
.book__ok { color: var(--cream); font-size: 15.5px; font-weight: 600; text-align: center; padding: 4px 0; }
.done__ok--later { background: transparent; color: var(--dim); box-shadow: none; border: 1px solid var(--line); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .reviews, .team { grid-template-columns: 1fr; }
  .lead__grid { grid-template-columns: 1fr; }
  /* 16px floor: below that, iOS Safari zooms into the field on focus */
  .f-field input, .f-select select, .dd-btn { font-size: 16px; }
}
@media (max-width: 560px) {
  /* horizontal only: the padding shorthand would zero .nav__inner's vertical
     padding (same specificity, later in the file) and crush the sticky bar */
  .container { padding-left: 18px; padding-right: 18px; }
  .brand__logo { height: 32px; }
  .nav .btn--sm { padding: 12px 16px; font-size: 13px; }
  .hero__cta .btn { width: 100%; }
  .hero__trust { flex-wrap: wrap; justify-content: center; text-align: center; }
  .promo { gap: 13px; padding: 13px 16px; }
  .promo__amount { font-size: 36px; }
  .browser__cta { padding: 12px 14px; }
  .browser__cta-txt b { font-size: 13.5px; }
  .card { padding: 24px 20px; }
  .step { padding: 24px 20px; }
  .note { padding: 18px 20px; }
  .review { padding: 24px 20px 22px; }
  .reviews__cta .btn { width: 100%; }
  .faq summary { font-size: 17px; }
  .faq summary::after { top: 22px; }
  .faq details p { padding-right: 0; }
  .form { padding: 24px 18px; }
  .f-row { grid-template-columns: 1fr; }
  .contact { padding: 16px 18px; }
  .rev-modal { padding: 14px; }
  .rev-modal__card { padding: 26px 20px 24px; max-height: 88svh; }
  .done__card { padding: 30px 22px 26px; }
  /* full-screen viewer on phones: the frame is already at device width, so it
     shows the site's mobile layout; the Bureau/Mobile toggle is meaningless. */
  .viewer { padding: 0; }
  .viewer__window, .viewer__window.is-mobile { width: 100%; max-width: none; height: 100%; border: 0; border-radius: 0; }
  .viewer__dots, .viewer__toggle { display: none; }
  .spec__row { padding: 16px 18px; }
  .foot__inner { flex-direction: column; text-align: center; }
}

/* ----------------------------------------------------------- touch hover */
/* on touch screens :hover sticks after a tap; keep the lift effects from
   freezing mid-air */
@media (hover: none) {
  .btn--primary:hover, .btn--ghost:hover { transform: none; }
  .btn--ghost:hover { border-color: var(--line-2); background: transparent; }
  .card:hover, .team__card:hover, .contact:hover { transform: none; border-color: var(--line); background: var(--surface); }
  .contact:hover .contact__num { color: var(--cream); }
  .browser__cta:hover { filter: none; }
  .browser__cta:hover .browser__cta-arrow { transform: none; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .dot, .cue svg, .serp__caret { animation: none; }
  .btn, .card, .contact, .browser__screen, .done__card, .rev-modal__card, .viewer__window { transition: none; }
}