/* ============================================================
   Upvis Agency — generated from blueprint/design-system.md
   Restyled 2026-10 per the "Upvis 26 Restyle" design artifact.
   Accent: #D6524C (coral/red, primary) — replaces the earlier blue;
   --signature now mirrors --accent (kept as a separate token since
   existing rules reference it, rather than rewriting every call site).
   ============================================================ */

:root {
  /* Neutral ramp */
  --ink-900: #1e1e1e;
  --ink-700: #47474a;
  --ink-500: #75757a;
  --ink-300: #a8a8ac;
  --ink-150: #d8d8da;
  --ink-075: #ececec;
  --bg: #ffffff;
  --dark-tint: #303030;
  --dark-tint-border: rgba(255, 255, 255, 0.1);

  /* Brand */
  --accent: #d6524c;
  --accent-dark: #b23c37;
  --signature: #d6524c;
  --signature-dark: #b23c37;

  /* Type */
  --font-display: "Space Grotesk", "Geist", "Arial", sans-serif;
  --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale (base 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-pill: 999px;

  /* Shadow (used sparingly — overlays only) */
  --shadow-soft: 0 12px 32px rgba(60, 28, 24, 0.1);
  --shadow-overlay: 0 24px 64px rgba(60, 28, 24, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 350ms;
  --dur-med: 500ms;
}

* { box-sizing: border-box; }
/* No native `scroll-behavior: smooth` here on purpose — Lenis (see script.js)
   owns anchor-link scrolling. Native CSS smooth-scroll fights Lenis's own
   per-frame scrollTo calls (each one gets its own tiny native animation
   layered on top), which is what produces janky, laggy scrolling. */
html { overflow-x: clip; }
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Whisper-quiet page-wide atmosphere: a faint grain layer and a hint of a
   column grid. Both stay near-subliminal — felt more than seen. */
.bg-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.bg-grid span { width: 1px; height: 100%; background: var(--ink-075); opacity: 0.6; }
@media (max-width: 767px) { .bg-grid { display: none; } }

main, header, footer, nav { position: relative; z-index: 1; }

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

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
@media (max-width: 991px) { .container { padding: 0 var(--sp-6); } }
@media (max-width: 479px) { .container { padding: 0 var(--sp-5); } }

section { position: relative; }
/* Top-padding only, no bottom — matches the artifact's rhythm of a single
   gap between sections (its own top padding) rather than stacking a
   bottom-padding-plus-top-padding double gap between every pair. */
.section-pad {
  padding-top: 120px;
}
@media (max-width: 767px) {
  .section-pad { padding-top: 88px; }
}

/* Dark section-tint utility — NOT applied anywhere by default. The design
   system explicitly warns against alternating strong background colors
   section-by-section "for rhythm"; the site now stays on one light
   background throughout, with hairline dividers (.divider-top) and
   whitespace carrying section rhythm instead. Kept here, unused, as an
   available pattern in case a single strong-background moment (e.g. the
   closing CTA band) is deliberately wanted later — apply .section-tint to
   one element and everything sitting directly on it (not inside its own
   white card) flips from dark-on-light to light-on-dark automatically. */
.section-tint {
  background: var(--dark-tint);
  color: #fff;
}
.section-tint h1, .section-tint h2, .section-tint h3, .section-tint h4 { color: #fff; }
.section-tint .muted { color: #fff; }
.section-tint p { color: #fff; }
.section-tint .eyebrow { color: var(--accent); }
.section-tint .stat .label { color: #fff; }
.section-tint .stat .num { color: #fff; }
.section-tint .num-placeholder { color: rgba(255, 255, 255, 0.3); }
.section-tint .verbatim { color: #fff; }
.section-tint .verbatim span { color: #fff; }
.section-tint .hero-stat .num {
  background: linear-gradient(84deg, #ffffff, var(--accent) 85%);
  -webkit-background-clip: text;
  background-clip: text;
}
.section-tint .hero-stat .num-placeholder { -webkit-text-fill-color: rgba(255, 255, 255, 0.25); background: none; }
.section-tint .placeholder-tag {
  color: #fff;
  background: rgba(214, 82, 76, 0.35);
}
.section-tint.stats-band { border-color: var(--dark-tint-border); }
.section-tint .diff-item .card-icon {
  background: linear-gradient(135deg, rgba(214,82,76,0.28), rgba(214,82,76,0.1));
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
}

.divider-top { border-top: 0; }

/* ---------------- Typography ---------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  margin: 0;
  color: var(--ink-900);
}
/* H1/H2 stay a light, editorial weight by default — the alternating-emphasis
   technique relies on the accent word being the ONLY bold, heavy thing in
   the sentence. A uniformly bold heading flattens that contrast. */
h1, h2 { font-weight: 500; }
h3, h4 { font-weight: 500; line-height: 1.15; }
h1 { font-size: 64px; letter-spacing: -0.055em; }
h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.05em; }
h3 { font-size: 24px; letter-spacing: -0.03em; }
h4 { font-size: 20px; letter-spacing: -0.03em; }

@media (max-width: 991px) {
  h1 { font-size: 48px; }
}
@media (max-width: 479px) {
  h1 { font-size: 38px; }
  h3 { font-size: 20px; }
}

p { margin: 0; color: var(--ink-900); }

.lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-900);
  max-width: 620px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Pill-shaped section label — distinct from .eyebrow (hero-only, plain
   text + dot) used where a section needs a small tag above its heading. */
.section-eyebrow {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}

/* Animated gradient fill on the accent heading word — same slow shimmer
   device as .btn-gradient, through the brand blue instead of terracotta. */
.accent-text {
  background: linear-gradient(115deg, var(--accent-dark) 0%, var(--accent) 35%, #ef9c79 50%, var(--accent) 65%, var(--accent-dark) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
  animation: gradient-flow 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .accent-text { animation: none; background-position: 40% 50%; }
}

.muted { color: #8a8a8a; font-weight: inherit; }
h1 .accent-text, h2 .accent-text { font-weight: 700; }

.placeholder-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signature-dark);
  background: rgba(214, 82, 76, 0.08);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  margin-left: var(--sp-2);
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------------- Buttons ---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn svg { transition: transform var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover svg { transform: translate(3px, -3px); } }

/* Animated gradient fill — a slow, continuous shimmer through the brand's
   terracotta range instead of a flat color; speeds up on hover as the
   state-change feedback (in place of a static color swap). */
.btn-gradient {
  background: linear-gradient(115deg, var(--signature-dark) 0%, var(--signature) 35%, #ef9c79 50%, var(--signature) 65%, var(--signature-dark) 100%);
  background-size: 250% 100%;
  animation: gradient-flow 6s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) { .btn-gradient:hover { animation-duration: 2s; } }
@keyframes gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-gradient { animation: none; background-position: 40% 50%; }
}

.btn-primary {
  color: #fff;
}
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { box-shadow: var(--shadow-soft); } }

.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-150);
  font-family: var(--font-body);
}
@media (hover: hover) and (pointer: fine) { .btn-secondary:hover { border-color: var(--ink-900); background: var(--ink-075); } }
/* the mobile off-canvas panel is a dark surface — the outlined button
   needs its own light-on-dark colors, same reasoning as .section-tint */
.mobile-panel .btn-secondary {
  width: 100%;
  justify-content: center;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
@media (hover: hover) and (pointer: fine) { .mobile-panel .btn-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); } }
.mobile-book-btn { margin-bottom: var(--sp-4); }

/* Solid dark pill — the nav's lone CTA inside the floating pill nav,
   distinct from the outlined .btn-secondary used elsewhere. */
.btn-nav-cta {
  background: var(--ink-900);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) { .btn-nav-cta:hover { box-shadow: var(--shadow-soft); } }

/* magnetic wrapper (JS toggles transform) */
.is-magnetic { will-change: transform; }

/* ---------------- Navbar ----------------
   A floating pill, sticky with a gap from the viewport edge, rather than an
   edge-to-edge bar — always visible with its border/shadow (no more
   scroll-triggered .is-scrolled state; the pill reads the same at rest and
   while scrolled, so that JS class is now a harmless no-op). */
.navbar {
  position: sticky;
  top: 14px;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.navbar .container {
  width: auto;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: 22px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 6px 24px rgba(60, 28, 24, 0.06);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.logo-img { height: 20px; width: auto; display: block; }
.logo-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--ink-900);
  white-space: nowrap;
}
.footer-brand .logo-img { height: 20px; }
/* On the narrowest phones the navbar logo competes with the WhatsApp button
   and hamburger for a single row — "Upvis Agency" wraps to two lines rather
   than truncating, blowing up the navbar's height. Drop to the icon mark
   alone below 480px; the footer logo (plenty of its own row) keeps the text. */
@media (max-width: 479px) {
  .navbar .logo-text { display: none; }
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.nav-links a {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: var(--ink-700);
  padding: 12px 2px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 2px; right: 100%; bottom: 10px;
  height: 1px;
  background: var(--accent);
  transition: right var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink-900); } }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { right: 2px; } }

.nav-cta { display: flex; align-items: center; gap: var(--sp-2); }
.nav-cta .btn { padding: 0 18px; height: 44px; font-size: 14px; }

.hamburger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-sm);
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hamburger span, .hamburger span::before, .hamburger span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--ink-900);
  position: relative;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hamburger span::before { position: absolute; top: -6px; }
.hamburger span::after { position: absolute; top: 6px; }

.mobile-panel {
  position: fixed;
  inset: 0;
  background: var(--ink-900);
  color: #fff;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-10);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease);
}
.mobile-panel.is-open { transform: translateY(0); }
.mobile-panel ul { list-style: none; padding: 0; margin: 0 0 var(--sp-8); }
.mobile-panel li { margin-bottom: var(--sp-6); }
.mobile-panel a { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: #fff; }

@media (max-width: 991px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* ---------------- Hero ---------------- */
.hero {
  /* No more +56px fixed-nav compensation — the nav is `position: sticky`
     now, so it occupies its own space in normal flow and the hero already
     starts right after it with no overlap to correct for. */
  position: relative;
  padding-top: 72px;
  padding-bottom: var(--sp-16);
  overflow: hidden;
}
.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12) 56px;
}
.hero-content {
  flex: 1.15 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero h1 { margin: 0; font-size: clamp(44px, 6.6vw, 92px); line-height: 0.98; letter-spacing: -0.055em; }
.hero .lede { max-width: 540px; margin: 0; text-align: left; }
.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  flex-wrap: wrap;
}
.hero-secondary-link { font-size: 15px; font-weight: 600; color: var(--ink-900); padding: 12px 0; }
@media (hover: hover) and (pointer: fine) { .hero-secondary-link:hover { color: var(--accent); } }

.hero-trust-list {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--ink-075);
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-8);
  font-size: 14px;
  color: var(--ink-700);
}
.hero-trust-list li { display: flex; align-items: center; gap: var(--sp-2); }
.hero-trust-list svg { flex: none; color: var(--accent); }
.hero-trust-list strong { color: var(--ink-900); font-weight: 600; }

/* ---- Hero visual: a decorative browser-window mockup with a floating
   GA4 badge and a floating ad-preview card — illustrates "site + tracking
   + ads" at a glance instead of a literal screenshot (none exists yet). ---- */
.hero-visual {
  flex: 1 1 380px;
  min-width: 0;
  position: relative;
  padding: var(--sp-6) 0 var(--sp-10);
}
.hero-visual-browser {
  margin-left: 8%;
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.hero-visual-browser-bar { display: flex; align-items: center; gap: 6px; }
.hero-visual-browser-bar span:not(.hero-visual-browser-url) { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-150); }
.hero-visual-browser-url { margin-left: var(--sp-2); flex: 1; height: 22px; border-radius: var(--radius-pill); background: var(--ink-075); }
.hero-visual-browser-body { background: var(--ink-075); border-radius: var(--radius-sm); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-visual-bar { display: block; height: 16px; border-radius: 5px; background: var(--ink-150); }
.hero-visual-bar-dark { background: var(--ink-900); }
.hero-visual-bar-thin { height: 8px; border-radius: 4px; background: var(--ink-150); opacity: 0.8; margin-top: 2px; }
.hero-visual-cta { display: block; height: 28px; width: 110px; border-radius: var(--radius-pill); background: var(--accent); margin-top: var(--sp-2); }
.hero-visual-chart-card { border: 1px solid var(--ink-075); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-3) 10px; display: flex; flex-direction: column; gap: var(--sp-2); }
.hero-visual-chart-label { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-700); font-family: ui-monospace, monospace; }
.hero-visual-chart-card svg { width: 100%; height: 96px; display: block; }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.draw { animation: draw 1.1s var(--ease) 0.4s both; }
@media (prefers-reduced-motion: reduce) { .draw { animation: none; } }

.hero-visual-badge {
  position: absolute;
  top: 0; right: 4%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: 8px 14px;
  font-size: 11px;
  color: var(--ink-700);
  font-family: ui-monospace, monospace;
}
.pulse-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after { animation: none; }
}

.hero-visual-ad-card {
  position: absolute;
  left: 0; bottom: 0;
  width: 210px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.hero-visual-ad-search { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--ink-075); border-radius: var(--radius-pill); padding: 6px 10px; color: var(--ink-300); }
.hero-visual-ad-search span { height: 6px; width: 60%; border-radius: 3px; background: var(--ink-150); }
.hero-visual-ad-label { font-size: 10px; font-weight: 700; color: var(--accent); }
.hero-visual-ad-card .hero-visual-bar { height: 9px; }
.hero-visual-ad-card .hero-visual-bar-thin { height: 6px; }

@media (max-width: 767px) {
  .hero-visual-badge { position: static; align-self: flex-start; margin-top: var(--sp-4); }
  .hero-visual-ad-card { display: none; }
  .hero-visual-browser { margin-left: 0; }
}

.hero-bg-shape {
  position: absolute;
  top: -120px; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(214,82,76,0.10) 0%, rgba(214,82,76,0) 65%);
  pointer-events: none;
  z-index: -1;
}

/* ---------------- Stats ----------------
   One dark rounded card: a big headline stat + two sub-stats on the left,
   two quote cards on the right — consolidated into a single surface rather
   than three separate pieces scattered across the section. */
.stats-band-wrap { padding: var(--sp-3) var(--sp-4) 0; }
.stats-band-wrap .container { max-width: 1260px; padding: 0; }
.stats-band {
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 56px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-10);
}
.stats-band-main { flex: 2 1 340px; display: flex; flex-direction: column; gap: 10px; }
.stats-band-main > .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
}
.stats-band-main > p { margin: 0; max-width: 420px; color: #b5b5b5; }
/* Any .stat (the 3-col .stats-grid included — reused as a dark card on the
   case-study page) sitting inside .stats-band needs its own light-on-dark
   colors: .stat .num/.label set color explicitly, so they don't inherit
   .stats-band's white text the way an unstyled element would. */
.stats-band .stat .num { color: #fff; }
.stats-band .stat .label { color: #b5b5b5; }
.stats-band .num-placeholder { color: rgba(255, 255, 255, 0.3); }
.stats-grid-pair { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-4); }
.stats-grid-pair .num { font-size: 34px; letter-spacing: -0.03em; }

.stats-band-quotes { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--sp-3); }

/* .stats-band reused solo (just the dark-card treatment, no main/quotes
   split) — the case-study page's simpler 3-stat Results section. */
.stats-band-solo { display: block; }
.verbatim {
  margin: 0;
  background: var(--dark-tint);
  border: 1px solid #444444;
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
}
.verbatim blockquote { margin: 0 0 var(--sp-2); font-size: 18px; letter-spacing: -0.02em; line-height: 1.3; color: #fff; }
.verbatim figcaption { font-size: 13px; color: #b5b5b5; }

/* Inline trust pills under the final CTA's buttons — plain pill badges
   rather than the floating parallax cards used earlier in the page. */
.cta-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--ink-700);
  margin-top: 28px;
}
.cta-trust-pills span {
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.cta-trust-pills strong { font-weight: 500; color: var(--ink-900); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  text-align: center;
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -1px;
  color: var(--ink-900);
  line-height: 1.1;
}
.num-placeholder { color: var(--ink-150); font-weight: 400; }
.stat .label {
  margin-top: var(--sp-2);
  font-size: 14px;
  color: var(--ink-900);
}
@media (max-width: 767px) {
  .stats-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.stats-grid-pair { grid-template-columns: repeat(2, 1fr); max-width: 500px; margin: 0 auto; }
/* Inside the dark band the pair is a left-aligned row under the big number,
   not the centred grid above — it needs its own gap from the paragraph. */
.stats-band .stats-grid-pair { max-width: none; margin: 18px 0 0; gap: var(--sp-3) 28px; }
.stats-band .stats-grid-pair .num { font-weight: 500; line-height: 1.2; }
.stats-band .stats-grid-pair .label { margin-top: 2px; }

/* ---------------- Section headers ---------------- */
.section-head {
  max-width: 640px;
  margin: 0 0 var(--sp-10);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 14px; font-size: 17px; }

/* ---------------- Service cards ----------------
   A bento layout: the lead service gets a big illustrated "browser" mockup,
   the other two stack as compact rows each with their own small mockup —
   matching the differentiators section's same lead/small asymmetry below. */
.service-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.service-card {
  box-sizing: border-box;
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.service-card-lead { flex: 1.15 1 400px; min-width: 0; }
.service-stack { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.service-card-row { flex: 1; flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
.service-card-body { padding: 0 var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.service-card-row .service-card-body { flex: 1.3 1 220px; min-width: 0; padding: var(--sp-3) var(--sp-3) var(--sp-4) var(--sp-1); }
.service-card-eyebrow { font-size: 12px; font-weight: 600; color: var(--accent); }
.service-card-body h3 { font-size: 19px; }
.service-card-lead .service-card-body h3 { font-size: clamp(22px, 2.6vw, 28px); }
.service-card-body p { margin: 0; font-size: 15px; color: var(--ink-700); max-width: 46ch; }
.service-card-row .service-card-body p { font-size: 14px; }
.service-card-body .card-link { margin-top: auto; }

.service-mock {
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.service-mock-site { flex: 1; min-height: 260px; padding: var(--sp-5); }
.service-mock-dots { display: flex; gap: 5px; }
.service-mock-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-150); }
.mock-bar { display: block; height: 20px; border-radius: 5px; background: var(--ink-150); }
.mock-bar-dark { background: var(--ink-900); margin-top: var(--sp-2); }
.mock-bar-thin { height: 8px; border-radius: 4px; background: var(--ink-075); margin-top: var(--sp-1); }
.service-mock-buttons { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.service-mock-btn-accent { height: 30px; width: 110px; border-radius: var(--radius-pill); background: var(--accent); }
.service-mock-btn-ghost { height: 30px; width: 84px; border-radius: var(--radius-pill); background: var(--ink-075); }
.service-mock-tiles { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.service-mock-tiles span { height: 54px; border-radius: 8px; background: #f5f5f5; }

.service-mock-chart { flex: 1 1 170px; min-height: 170px; padding: var(--sp-4); }
.service-mock-chart-label { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-700); font-family: ui-monospace, monospace; }
.service-mock-chart-bars { display: flex; align-items: flex-end; gap: 7px; flex: 1; }
.service-mock-chart-bars span { flex: 1; border-radius: 5px; background: var(--ink-075); }
.service-mock-chart-bars span.is-dark { background: var(--ink-900); }
.service-mock-chart-bars span.is-accent { background: var(--accent); }

.service-mock-ads { flex: 1 1 170px; min-height: 170px; padding: var(--sp-4); }
.service-mock-search { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--ink-075); border-radius: var(--radius-pill); padding: 7px 12px; color: var(--ink-300); }
.service-mock-search span { height: 7px; width: 55%; border-radius: 4px; background: var(--ink-075); }
.service-mock-ad { border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.service-mock-ad-label { font-size: 10px; font-weight: 600; color: var(--accent); }
.service-mock-ad .mock-bar-dark { height: 9px; margin-top: 0; }
.service-mock-ad .mock-bar-thin { height: 7px; width: 90%; }

@media (max-width: 767px) { .service-grid { gap: var(--sp-4); } .service-stack { gap: var(--sp-4); } }

.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-5);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}
.card-link svg { transition: transform var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .card-link:hover svg { transform: translateX(3px); } }

/* .card-icon: now only used by .diff-item (service cards switched to the
   illustrated .service-mock above) */
.card-icon {
  width: 60px; height: 60px;
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  background: linear-gradient(135deg, rgba(214,82,76,0.16), rgba(214,82,76,0.06));
  box-shadow: 0 8px 20px -8px rgba(214,82,76,0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: var(--sp-6);
  transition: transform var(--dur-fast) var(--ease), border-radius var(--dur-med) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .diff-item:hover .card-icon { transform: translateY(-2px) rotate(-4deg); border-radius: 58% 42% 35% 65% / 55% 55% 45% 45%; } }

/* ---------------- Differentiators ----------------
   An asymmetric bento: the lead point gets a large dark card (it's the
   single most important differentiator — tracking built in from day one),
   the other two stay small and light. */
.diff-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.diff-item {
  flex: 1 1 260px;
  box-sizing: border-box;
  min-height: 220px;
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
}
.diff-item .card-icon {
  background: linear-gradient(135deg, rgba(214,82,76,0.16), rgba(214,82,76,0.06));
  box-shadow: 0 8px 20px -8px rgba(214,82,76,0.35);
  color: var(--signature);
  width: 52px; height: 52px;
  margin-bottom: 0;
}
.diff-item h4 { margin: auto 0 0; padding-top: var(--sp-5); }
.diff-item p { margin-top: var(--sp-2); font-size: 15px; }

.diff-item-lead {
  flex: 2 1 420px;
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.diff-item-lead .card-icon { background: rgba(255,255,255,0.1); box-shadow: none; }
.diff-item-lead h4 { color: #fff; font-size: clamp(24px, 3vw, 34px); max-width: 420px; }
.diff-item-lead p { color: #b5b5b5; max-width: 520px; }

@media (max-width: 767px) { .diff-grid { gap: var(--sp-4); } }

/* ---------------- Process stepper ----------------
   A dark panel showing one step at a time (auto-advancing while in view,
   per script.js) beside a vertical list of step buttons — replaces the
   earlier static zigzag timeline with something that actually demonstrates
   "tracking progress" rather than just listing five cards. */
.process-layout { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.process-panel {
  flex: 1.3 1 420px;
  min-width: 0;
  box-sizing: border-box;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  min-height: 412px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  overflow: hidden;
}
.process-track {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b5b5b5;
}
.process-track-line {
  flex: 1;
  height: 2px;
  background: #444444;
  border-radius: 2px;
  overflow: hidden;
  display: block;
}
.process-track-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0.2);
  transition: transform 500ms var(--ease);
}
.process-step-panel { display: none; margin-top: auto; flex-direction: column; gap: var(--sp-3); }
.process-step-panel.is-active { display: flex; animation: process-step-in 500ms var(--ease) both; }
@keyframes process-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .process-step-panel.is-active { animation: none; } }
.process-num {
  font-family: var(--font-display);
  font-size: clamp(88px, 12vw, 150px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--accent);
}
.process-step-panel h4 { color: #fff; margin: var(--sp-3) 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 500; }
.process-step-panel p { margin: 0; max-width: 460px; color: #b5b5b5; font-size: 15px; }

.process-steps-nav { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.process-step-btn {
  position: relative;
  overflow: hidden;
  flex: 1;
  width: 100%;
  min-height: 64px;
  background: var(--ink-075);
  border: 1px solid var(--ink-075);
  border-radius: 14px;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-align: left;
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .process-step-btn:hover { border-color: var(--ink-150); } }
.process-step-btn.is-active { background: #fff; border-color: var(--ink-075); }
.process-step-btn-num { font-family: var(--font-display); font-size: 14px; color: var(--ink-500); width: 24px; flex: none; }
.process-step-btn > span:nth-child(2) { flex: 1; }
.process-step-btn-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
.process-step-btn.is-autoplaying .process-step-btn-bar {
  animation: process-bar-fill 3500ms linear forwards;
}
@keyframes process-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .process-step-btn.is-autoplaying .process-step-btn-bar { animation: none; }
}

/* ---------------- Testimonials ---------------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 767px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card {
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  /* explicit, not inherited — this card stays light even when a parent
     section (like .section-tint) sets a light-on-dark text color */
  color: var(--ink-900);
}
.testi-card blockquote {
  margin: 0 0 var(--sp-6);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-900);
}
.testi-author { display: flex; align-items: center; gap: var(--sp-3); }
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink-075);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.testi-author .name { font-weight: 600; font-size: 14px; }
.testi-author .role { font-size: 13px; color: var(--ink-900); }

/* ---------------- Portfolio / case-study cards ---------------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 991px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .portfolio-grid { grid-template-columns: 1fr; } }

.portfolio-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } }
.portfolio-cover {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,150,190,0.14), rgba(214,82,76,0.08));
}
.portfolio-cover-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-900);
  opacity: 0.45;
}
.portfolio-body { padding: var(--sp-6); }
.portfolio-body h3 { margin-bottom: var(--sp-2); }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-900);
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}
/* the "voir le projet" affordance is the .card-link component already used
   on service cards — hovering anywhere on the card (not just the link
   itself) triggers its arrow-slide, since the whole card is the click target */
.portfolio-card .card-link { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .portfolio-card:hover .card-link svg { transform: translateX(3px); } }

/* ---------------- Case-study / project detail page ---------------- */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-900);
  margin-bottom: var(--sp-8);
}
.back-link svg { transition: transform var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .back-link:hover svg { transform: translateX(-3px); } }

/* No more +56px fixed-nav compensation — see .hero's comment. */
.project-header-hero { padding-top: var(--sp-20); padding-bottom: 0; }
/* Project page rhythm: each block owns the space above it, so a missing summary,
   link line or key figures never leaves a hole or squashes two blocks together.
   Title/summary -> links 24px, links -> capture 40px, capture -> figures 40px,
   last element of the header -> next section 80px (56px on phones). */
.project-header-hero + .section-pad { padding-top: 80px; }
@media (max-width: 767px) { .project-header-hero + .section-pad { padding-top: 56px; } }
.project-header { text-align: center; }
.project-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.project-header .lede { margin: var(--sp-5) auto 0; }
.project-meta { display: flex; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; font-size: 14px; margin: var(--sp-6) 0 0; }
.project-meta a { color: var(--accent); font-weight: 600; }
.project-meta-link svg { display: inline; vertical-align: -1px; }
.project-testi { max-width: 720px; }

/* A believable browser-window mockup (chrome bar + fake content bars) in
   place of a flat dashed "placeholder" box — same wireframe language as
   the homepage's hero/service mockups, swapped for a real screenshot once
   the project has one. */
.project-hero-shot {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-075);
  background: #fff;
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-10);
}
.project-hero-shot-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-075);
  flex: none;
}
.project-hero-shot-chrome span:not(.project-hero-shot-url) { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-150); }
.project-hero-shot-url { margin-left: var(--sp-2); max-width: 260px; flex: 1; height: 20px; border-radius: var(--radius-pill); background: var(--ink-075); }
.project-hero-shot-body {
  flex: 1;
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: linear-gradient(135deg, rgba(37,150,190,0.06), rgba(214,82,76,0.04));
}
.project-hero-shot-label {
  margin: auto auto 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

.project-quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  max-width: 460px;
  margin: var(--sp-10) auto 0;
  text-align: center;
}

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 767px) { .challenge-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }
.challenge-grid > div {
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}
.challenge-grid h4 { margin-bottom: var(--sp-3); }
.challenge-grid p { font-size: 15px; color: var(--ink-700); }

/* ---------------- Pricing ---------------- */
.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.pricing-tab {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-150);
  background: #fff;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pricing-tab.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
/* padding-top gives the floating "Recommandé" badge room to sit above the
   header row without being clipped by this wrapper's own scroll overflow */
.pricing-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 16px; }
/* Below 992px the comparison table (760px min-width) no longer fits without
   a horizontal scroll — swap it for the one-card-per-tier summary instead
   of forcing that scroll on a touch device. */
.pricing-summary-cards { display: none; }
@media (max-width: 991px) {
  .pricing-scroll { display: none; }
  .pricing-summary-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
}
.pricing-summary-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  /* no overflow:hidden here — same reason as .pricing-table: it would clip
     the "Recommandé" badge poking above the head. The head rounds its own
     top corners instead of relying on the card to clip it. */
}
.pricing-summary-card.is-recommended { border-color: var(--signature); }
.pricing-summary-head {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--sp-5);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #fff;
  position: relative;
}
.pricing-summary-head.tier-decouverte,
.pricing-summary-head.tier-premium { background: var(--ink-075); color: var(--ink-900); }
.pricing-summary-head.tier-croissance { background: var(--ink-900); }
.pricing-summary-body { padding: var(--sp-6); }
.pricing-summary-price { text-align: center; margin-bottom: var(--sp-5); }
.pricing-summary-price strong { display: block; font-family: var(--font-display); font-size: 26px; }
.pricing-summary-price span { font-size: 12px; color: var(--ink-900); opacity: 0.65; }
.pricing-summary-body > p { font-size: 14px; text-align: center; margin-bottom: var(--sp-5); }
.pricing-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pricing-summary-list li { font-size: 14px; padding-left: 22px; position: relative; }
.pricing-summary-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.pricing-table {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
  min-width: 760px;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  /* no overflow:hidden here — it would also clip the badge; corner
     rounding is applied per-cell instead (below) */
}
.pricing-table > *:nth-child(1) { border-top-left-radius: var(--radius-md); }
.pricing-table > *:nth-child(4) { border-top-right-radius: var(--radius-md); }
.pricing-table > *:nth-last-child(4) { border-bottom-left-radius: var(--radius-md); }
.pricing-table > *:last-child { border-bottom-right-radius: var(--radius-md); }

.pricing-cell {
  display: flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ink-075);
  font-size: 14px;
  color: var(--ink-900);
}
.pricing-cell:nth-last-child(-n+4) { border-bottom: none; }
.pricing-row-label { font-weight: 500; }
.pricing-cell.included, .pricing-cell.excluded, .pricing-cell.value { justify-content: center; text-align: center; }
.pricing-cell.included { color: var(--accent); }
.pricing-cell.excluded { color: var(--ink-150); }
.pricing-cell.value { font-weight: 600; font-size: 13px; }

/* Recommended-tier column (Croissance, always the 3rd of each 4-cell row)
   gets a highlighted dark background spanning the whole table height —
   header through price row — rather than just its header strip, so the
   "this is the one to pick" signal reads at a glance down the page. */
.pricing-table > *:nth-child(4n+3) {
  background: var(--ink-900);
  color: #fff;
  border-bottom-color: #3a3a3a;
}
.pricing-table > *:nth-child(4n+3).excluded { color: var(--ink-500); }
.pricing-table > .pricing-head:nth-child(4n+3) { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.pricing-table > .pricing-price:nth-child(4n+3) { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* Header row — Découverte/Premium are plain text; Croissance's dark
   background comes from the nth-child rule above instead of a tier class. */
.pricing-head {
  padding: var(--sp-5);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-900);
  position: relative;
}
.pricing-head-empty { background: transparent; }
.pricing-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--signature);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-075);
  white-space: nowrap;
}

.pricing-price { flex-direction: column; align-items: center; gap: 2px; padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.pricing-price strong { font-family: var(--font-display); font-size: 20px; }
.pricing-price span { font-size: 12px; color: var(--ink-900); text-align: center; }
/* The recommended column is dark: its price caption needs a light colour,
   otherwise it is ink on ink and disappears. */
.pricing-table > .pricing-price:nth-child(4n+3) span { color: #b5b5b5; }
.pricing-price-label { font-weight: 600; }

.pricing-footnote { margin-top: var(--sp-6); text-align: center; font-size: 14px; }

@media (max-width: 767px) {
  .pricing-tabs { flex-wrap: wrap; }
  .pricing-cell, .pricing-head { padding: var(--sp-3) var(--sp-4); }
}

/* ---------------- FAQ ----------------
   Two-column: intro (eyebrow, heading, contact link) beside the accordion,
   rather than a centered heading stacked above a centered list. */
.faq-layout { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); }
.faq-intro { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.faq-intro p { font-size: 14px; color: var(--ink-700); }
.faq-intro a { font-weight: 600; color: var(--ink-900); }
@media (hover: hover) and (pointer: fine) { .faq-intro a:hover { color: var(--accent); } }
.faq-list { flex: 1.4 1 420px; min-width: 0; }
.faq-item { border-top: 1px solid var(--ink-075); }
.faq-item:last-child { border-bottom: 1px solid var(--ink-075); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: var(--sp-6) 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
}
.faq-icon {
  flex: none;
  width: 28px; height: 28px;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ink-900);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease);
}
.faq-a p { padding-bottom: var(--sp-6); font-size: 15px; max-width: 620px; }

/* ---------------- CTA band ----------------
   Quiet variant: same background as the rest of the page end to end — the
   heading's word-emphasis treatment and the accent-colored button carry
   the emphasis, no background shift needed. */
/* A bit more top padding than other sections — the climactic CTA gets the
   largest gap before it, same as the artifact's 140px vs. 120px baseline. */
.cta-band { text-align: center; position: relative; overflow: hidden; padding-top: 140px; }
@media (max-width: 767px) { .cta-band { padding-top: 104px; } }
.cta-band .container { max-width: 820px; }
.cta-logo { display: block; height: 30px; width: auto; aspect-ratio: 1600 / 518; margin: 0 auto var(--sp-5); color: var(--ink-900); fill: currentColor; overflow: visible; }
.cta-band h2 { margin-bottom: var(--sp-5); }
.cta-band .lede { margin: 0 auto var(--sp-5); }
.cta-band-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-band-ctas .btn { height: 48px; padding: 0 22px; box-sizing: border-box; }
.cta-band h2 { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.055em; }
.cta-band .lede { font-size: 16px; max-width: 480px; }

/* ---------------- Footer ----------------
   Wrapped in a rounded card (matching the artifact) instead of a flat
   section with just a hairline divider above it. */
footer {
  padding: 120px var(--sp-4) var(--sp-4);
}
@media (max-width: 767px) { footer { padding-top: 88px; } }
.footer-card {
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  max-width: 1260px;
  padding: 36px 28px var(--sp-6);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--ink-075);
  flex-wrap: wrap;
}
.footer-brand p { margin-top: var(--sp-3); max-width: 320px; color: var(--ink-900); font-size: 14px; }
.footer-cols { display: flex; gap: var(--sp-16); }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0 0 var(--sp-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-size: 14px; color: var(--ink-900); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--accent); } }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  font-size: 13px;
  color: var(--ink-900);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (max-width: 767px) {
  .footer-top { flex-direction: column; gap: var(--sp-8); }
  .footer-cols { gap: var(--sp-10); }
}

/* ---------------- Floating WhatsApp button ---------------- */
.floating-wa {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-overlay);
  transition: transform var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .floating-wa:hover { transform: scale(1.08); } }

/* ---------------- Cookie consent banner ----------------
   Bottom-left, independent of the bottom-right WA bubble — stacked above
   it on narrow screens instead of competing for the same corner. Dismissal
   is remembered in localStorage (script.js) so it doesn't reappear on
   every visit once a visitor has made a choice. */
.cookie-banner {
  position: fixed;
  left: var(--sp-6);
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 90;
  max-width: 380px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cookie-banner p { margin: 0; font-size: 13px; color: var(--ink-700); }
.cookie-banner-actions { display: flex; gap: var(--sp-2); }
.cookie-banner-actions button {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.cookie-banner-refuse { background: #fff; color: var(--ink-900); border: 1px solid var(--ink-150); }
@media (hover: hover) and (pointer: fine) { .cookie-banner-refuse:hover { border-color: var(--ink-900); } }
.cookie-banner-accept { background: var(--ink-900); color: #fff; border: 1px solid var(--ink-900); }
/* .cookie-banner's own `display: flex` (author styles) otherwise beats the
   browser's default `[hidden] { display: none }` (user-agent styles) even
   at equal selector specificity, since author origin always wins — without
   this the banner stays visible after the `hidden` attribute is set. */
.cookie-banner[hidden] { display: none; }
@media (max-width: 767px) {
  .cookie-banner { bottom: calc(var(--sp-6) + 56px + var(--sp-3)); }
}

/* ---------------- Scroll reveal ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: none; }
/* Once the entrance has finished (script.js adds .is-done and clears the
   stagger delay), hand the element back to a shorter transition so hover
   lifts on cards aren't slowed down by the 900ms entrance timing. */
.reveal.is-done {
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color 450ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------------- Polish: type, focus, skip link, hover ---------------- */
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }
.num, .pricing-price strong, .pricing-summary-price strong { font-variant-numeric: tabular-nums; }
.faq-a p { max-width: 62ch; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -80px;
  z-index: 200;
  background: var(--ink-900);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
}
.skip-link:focus { top: var(--sp-4); }

.section-head .section-eyebrow { margin-bottom: 14px; }

.btn:active { transform: scale(0.97); }
.service-card { transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color 450ms ease; }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(60, 28, 24, 0.28); border-color: #dcdcdc; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover, .portfolio-card:hover { transform: none; }
}


/* ---------------- Client logo marquee ----------------
   Constant drift, so linear easing; pauses under the pointer. With reduced
   motion the rows stop, wrap and centre, and the duplicate copies hide. */
.logo-band { padding: 96px 0 0; overflow: hidden; position: relative; z-index: 1; }
.logo-band .section-head { margin-bottom: var(--sp-10); }
.logo-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex;
  gap: var(--sp-3);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-marquee 48s linear infinite;
}
.logo-track.is-reverse { animation-direction: reverse; }
@keyframes logo-marquee { to { transform: translateX(calc(-50% - var(--sp-3) / 2)); } }
.logo-chip {
  flex: none;
  width: 148px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: 16px;
}
.logo-chip img { width: 76px; height: 76px; object-fit: contain; filter: brightness(0); opacity: 0.78; }
@media (hover: hover) and (pointer: fine) {
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 var(--sp-6); }
  .logo-chip[aria-hidden="true"] { display: none; }
}


/* ---------------- Service mock-ups: motion on card hover ----------------
   Each illustration replays a short build-up of itself when its card is
   hovered: the site lays out, the chart grows, the search turns into an ad.
   Decorative only, transform/opacity only, mouse devices only. */
.service-mock .mock-bar,
.service-mock-search span { transform-origin: left center; }
.service-mock-chart-bars span { transform-origin: center bottom; }
@keyframes mock-grow-x { from { transform: scaleX(0.15); opacity: 0.3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes mock-grow-y { from { transform: scaleY(0.12); } to { transform: scaleY(1); } }
@keyframes mock-rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mock-press { 0% { transform: scale(1); } 45% { transform: scale(0.94); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Levier 1: headline and text lines write in, buttons arrive, tiles rise */
  .service-card:hover .service-mock-site .mock-bar { animation: mock-grow-x 700ms var(--ease) both; }
  .service-card:hover .service-mock-site .mock-bar:nth-of-type(2) { animation-delay: 80ms; }
  .service-card:hover .service-mock-site .mock-bar:nth-of-type(3) { animation-delay: 160ms; }
  .service-card:hover .service-mock-site .mock-bar:nth-of-type(4) { animation-delay: 240ms; }
  .service-card:hover .service-mock-buttons span { animation: mock-rise 600ms var(--ease) 320ms both; }
  .service-card:hover .service-mock-buttons span + span { animation-delay: 400ms; }
  .service-card:hover .service-mock-btn-accent { animation: mock-rise 600ms var(--ease) 320ms both, mock-press 500ms var(--ease) 1100ms; }
  .service-card:hover .service-mock-tiles span { animation: mock-rise 700ms var(--ease) 480ms both; }
  .service-card:hover .service-mock-tiles span:nth-child(2) { animation-delay: 560ms; }
  .service-card:hover .service-mock-tiles span:nth-child(3) { animation-delay: 640ms; }
  /* Levier 2: bars grow from the baseline, left to right */
  .service-card:hover .service-mock-chart-bars span { animation: mock-grow-y 800ms var(--ease) both; }
  .service-card:hover .service-mock-chart-bars span:nth-child(2) { animation-delay: 70ms; }
  .service-card:hover .service-mock-chart-bars span:nth-child(3) { animation-delay: 140ms; }
  .service-card:hover .service-mock-chart-bars span:nth-child(4) { animation-delay: 210ms; }
  .service-card:hover .service-mock-chart-bars span:nth-child(5) { animation-delay: 280ms; }
  .service-card:hover .service-mock-chart-bars span:nth-child(6) { animation-delay: 350ms; }
  /* Levier 3: the query types in, then the ad appears and fills */
  .service-card:hover .service-mock-search span { animation: mock-grow-x 700ms var(--ease) both; }
  .service-card:hover .service-mock-ad { animation: mock-rise 700ms var(--ease) 450ms both; }
  .service-card:hover .service-mock-ad .mock-bar { animation: mock-grow-x 600ms var(--ease) 750ms both; }
  .service-card:hover .service-mock-ad .mock-bar + .mock-bar { animation-delay: 850ms; }
}

/* Key figures under the logo marquee: one quiet row, part of the same
   "proof" block instead of a separate dark band. */
.proof-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-8) 96px;
  margin-top: 56px;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--ink-075);
  text-align: center;
}
.proof-stat .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink-900);
}
.proof-stat .label { margin: 10px auto 0; max-width: 34ch; font-size: 14px; color: var(--ink-700); }
@media (max-width: 767px) {
  .proof-stats { gap: var(--sp-8) var(--sp-10); margin-top: var(--sp-10); }
}

/* ---------------- Blinking logo above the final CTA ----------------
   The U of the mark is an eye, so it blinks: once shortly after it scrolls
   into view, then a single and a double blink in every 6s cycle. Hovering
   restarts the cycle (.is-resetting, toggled in script.js), which gives an
   immediate blink. The lid is the eye cut-out squashing to a slit. */
.cta-logo-cut { fill: var(--bg); }
.cta-logo-eye { transform-box: fill-box; transform-origin: center; }
@keyframes cta-logo-blink {
  0%, 3% { transform: scaleY(1); }
  5.5% { transform: scaleY(0.06); }
  8%, 62% { transform: scaleY(1); }
  64.5% { transform: scaleY(0.06); }
  67% { transform: scaleY(1); }
  69.5% { transform: scaleY(0.06); }
  72%, 100% { transform: scaleY(1); }
}
.cta-logo.is-visible .cta-logo-eye-u { animation: cta-logo-blink 6s ease-in-out var(--cta-blink-delay, 700ms) infinite; }
.cta-logo.is-resetting .cta-logo-eye-u { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cta-logo.is-visible .cta-logo-eye-u { animation: none; }
}

/* ---------------- Pricing: "included in every plan" line and notes ---------------- */
.pricing-included { max-width: 760px; margin: 0 auto var(--sp-6); text-align: center; font-size: 14px; color: var(--ink-700); }
.pricing-included strong { font-weight: 600; color: var(--ink-900); }
/* Notes under each table: a small marquee of chips. The viewport's mask fades
   the chips out to transparent at both ends, and the two edge overlays blur
   what is still visible there, so chips dissolve into the page instead of
   being cut. Constant drift, so linear; pauses under the pointer. */
.pricing-notes { position: relative; max-width: 620px; margin: var(--sp-6) auto 0; font-size: 13px; color: var(--ink-700); }
.pricing-notes-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.pricing-notes-track {
  display: flex;
  gap: var(--sp-2);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: pricing-notes-marquee 36s linear infinite;
}
@keyframes pricing-notes-marquee { to { transform: translateX(calc(-50% - var(--sp-2) / 2)); } }
.pricing-notes-track li {
  flex: none;
  white-space: nowrap;
  background: #f5f5f5;
  border: 1px solid var(--ink-075);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.pricing-notes::before,
.pricing-notes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.pricing-notes::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.pricing-notes::after { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }
@media (hover: hover) and (pointer: fine) {
  .pricing-notes:hover .pricing-notes-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-notes-viewport { -webkit-mask-image: none; mask-image: none; }
  .pricing-notes::before, .pricing-notes::after { content: none; }
  .pricing-notes-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .pricing-notes-track li { white-space: normal; text-align: center; }
  .pricing-notes-track li[aria-hidden="true"] { display: none; }
}

/* ---------------- Pricing: optional extras (shop on Business, Ads tracking on Vitrine) ----------------
   A ring where the tick would be. It pulses to invite the click; ticking it
   fills it and script.js adds the option to that plan's price. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pricing-option { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.pricing-cell .pricing-option { padding: 11px; margin: -11px; }
.pricing-option-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pricing-option-box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color 250ms var(--ease), transform 160ms var(--ease);
}
.pricing-option-box svg { transform: scale(0.4); opacity: 0; transition: transform 250ms var(--ease), opacity 200ms ease; }
.pricing-option-box::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pricing-option-ping 1.8s var(--ease) infinite;
}
@keyframes pricing-option-ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.1); opacity: 0; } }
.pricing-option:active .pricing-option-box { transform: scale(0.9); }
.pricing-option-input:checked + .pricing-option-box { background: var(--accent); }
.pricing-option-input:checked + .pricing-option-box svg { transform: scale(1); opacity: 1; }
.pricing-option-input:checked + .pricing-option-box::after { animation: none; opacity: 0; }
.pricing-option-input:focus-visible + .pricing-option-box { outline: 2px solid currentColor; outline-offset: 3px; }
.pricing-table > *:nth-child(4n+3) .pricing-option-input:focus-visible + .pricing-option-box { outline-color: #fff; }
.pricing-summary-list li.pricing-summary-option { padding-left: 0; }
.pricing-summary-list li.pricing-summary-option::before { content: none; }
.pricing-summary-option .pricing-option { font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .pricing-option-box::after { animation: none; opacity: 0; }
}

/* ============================================================
   WordPress — ajouts propres au thème (absents du site statique)
   ============================================================ */

/* La barre d'admin est fixe en haut : décaler la navbar collante pour les
   utilisateurs connectés (elle redevient non fixe sous 600px). */
.admin-bar .navbar { top: 46px; }
@media (max-width: 782px) { .admin-bar .navbar { top: 60px; } }
@media (max-width: 600px) { .admin-bar .navbar { top: 14px; } }

/* Images réelles à la place des aperçus d'attente. */
.portfolio-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-hero-shot-img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.testi-avatar { overflow: hidden; }
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* Pages et articles rédigés dans l'éditeur de blocs. */
.entry { max-width: 808px; }
.entry-header { margin-bottom: var(--sp-10); }
.entry-header h1 { font-size: clamp(36px, 5.4vw, 56px); }
.entry-header .section-eyebrow { display: inline-block; margin-bottom: 14px; }
.entry-thumbnail { margin-bottom: var(--sp-10); border-radius: var(--radius-md); overflow: hidden; }
.entry-thumbnail img { width: 100%; height: auto; }
.entry-content { font-size: 17px; line-height: 1.65; color: var(--ink-700); }
.entry-content > * { margin-top: 0; margin-bottom: var(--sp-5); }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content p { color: inherit; }
.entry-content h2 { font-size: 32px; margin-top: var(--sp-12); margin-bottom: var(--sp-4); }
.entry-content h3 { margin-top: var(--sp-10); margin-bottom: var(--sp-3); }
.entry-content h4 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.entry-content a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: var(--sp-6); }
.entry-content li { margin-bottom: var(--sp-2); }
.entry-content img { height: auto; border-radius: var(--radius-sm); }
.entry-content blockquote { margin-left: 0; margin-right: 0; padding-left: var(--sp-5); border-left: 2px solid var(--accent); color: var(--ink-900); }
.entry-content .alignwide { width: min(1132px, calc(100vw - 48px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }

/* Liste d'articles + pagination. */
.post-list-item { padding: var(--sp-8) 0; border-top: 1px solid var(--ink-075); }
.post-list-item h3 { margin: var(--sp-2) 0 var(--sp-3); }
.post-list-item p { color: var(--ink-700); margin-bottom: var(--sp-4); }
.pagination { margin-top: var(--sp-10); }
.pagination .nav-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink-075); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; }
.pagination .page-numbers.current { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

.error-404 .lede { margin: var(--sp-5) 0 var(--sp-8); }
.error-404 .section-eyebrow { display: inline-block; margin-bottom: 14px; }
/* WordPress nomme aussi « .nav-links » le conteneur de pagination : neutraliser
   le soulignement animé du menu principal, qui cible la même classe. */
.pagination .nav-links a { color: var(--ink-900); }
.pagination .nav-links a::after { content: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Phones: the hero mock-up (browser window + conversions graph) is hidden.
   Stacked under the headline it doubled the height of the first screen. */
@media (max-width: 767px) {
  .hero-visual { display: none; }
}
/* ---------------- Footer legal links ---------------- */
.footer-legal a { transition: color 250ms ease; }
.footer-link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .footer-legal a:hover, .footer-link-btn:hover { color: var(--accent); }
}

/* ---------------- Booking popup (Google appointment page in an iframe) ---------------- */
html:has(dialog[open]) { overflow: hidden; }
.booking-dialog {
  width: min(880px, calc(100vw - 24px));
  height: min(740px, calc(100dvh - 24px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--ink-075);
  border-radius: 22px;
  background: #fff;
  color: var(--ink-900);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.booking-dialog[open] { display: flex; flex-direction: column; animation: booking-in 350ms var(--ease) both; }
.booking-dialog::backdrop { background: rgba(30, 30, 30, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: booking-fade 350ms ease both; }
@keyframes booking-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes booking-fade { from { opacity: 0; } to { opacity: 1; } }
.booking-dialog-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 8px 8px 8px 22px; border-bottom: 1px solid var(--ink-075); font-family: var(--font-display); font-size: 18px; letter-spacing: -0.03em; }
.booking-dialog-head strong { font-weight: 500; }
.booking-dialog-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-900); cursor: pointer; transition: background-color 250ms ease, transform 160ms var(--ease); }
.booking-dialog-close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .booking-dialog-close:hover { background: var(--ink-075); } }
.booking-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
.booking-dialog-foot { flex: none; margin: 0; padding: 10px 22px; border-top: 1px solid var(--ink-075); font-size: 12px; color: var(--ink-500); text-align: center; }
.booking-dialog-foot a { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .booking-dialog[open], .booking-dialog::backdrop { animation: none; }
}