/* ============================================================
   Dépan Express Habitat — Serrurier Grenoble
   Design tokens
   ============================================================ */
:root {
  --color-primary: #33495F;
  --color-primary-600: #3D5A73;
  --color-primary-700: #2A3F54;
  --color-primary-900: #16232E;
  --color-accent: #C1694B;
  --color-accent-600: #C1694B;
  --color-accent-700: #A5553B;
  --color-accent-800: #8B4530;
  --color-bg: #FBF9F6;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1EEE8;
  --color-text: #1E2A33;
  --color-text-muted: #5B6B76;
  --color-border: #E4E0DA;
  --color-star: #F5A623;
  --color-whatsapp: #25D366;
  --color-whatsapp-700: #1DA851;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(22, 35, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(22, 35, 46, 0.10);
  --shadow-lg: 0 24px 56px rgba(22, 35, 46, 0.18);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  --container: 1180px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: 78px;
}
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}

img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input, textarea, select { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-primary-900);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-primary-900);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  min-height: 48px;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-accent {
  /* accent-700, not accent: white text on the base accent only hits
     3.9:1 contrast, below WCAG AA's 4.5:1 for normal-weight 16px text */
  background: var(--color-accent-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-accent:hover { background: var(--color-accent-800); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Ghost style, not solid: keeps "Appeler maintenant" reading as the one
   primary action in this row, while WhatsApp stays clearly identifiable
   via its brand color on the border/icon instead of competing for
   attention as a second solid block. */
.btn-whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #fff;
  border: 2px solid rgba(37, 211, 102, 0.65);
}
.btn-whatsapp:hover { background: rgba(37, 211, 102, 0.22); border-color: var(--color-whatsapp); }
.btn-whatsapp svg { color: var(--color-whatsapp); }

.btn-outline {
  background: transparent;
  color: var(--color-primary-900);
  border: 2px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-primary-600); background: var(--color-surface); }

.btn-ghost-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.22); }

.btn-block { width: 100%; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  z-index: 100;
  /* No backdrop-filter: it was still causing scroll jank even at a reduced
     blur radius — the browser has to recomposite a full-width blur on every
     scroll frame for as long as the fixed header is on screen, i.e. the
     whole time. A near-opaque flat background reads almost the same
     visually with zero per-frame compositing cost. */
  background: rgba(251, 249, 246, 0.96);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
  background: rgba(251, 249, 246, 0.97);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 76px;
}

.logo-link { flex-shrink: 0; }
.logo-link img { height: 54px; width: auto; }

.main-nav {
  display: none;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.main-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--dur-base) var(--ease-out);
}
.main-nav a:hover, .main-nav a.is-active { color: var(--color-accent-700); }
.main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Twin contact pill (desktop header): phone + WhatsApp as one continuous
   stadium shape instead of two separate floating buttons — reads as a
   single grouped "get in touch" control instead of a bolted-on icon. */
.contact-pill {
  display: none;
  align-items: stretch;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.contact-pill-call {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px 10px 20px;
  background: var(--color-primary-900);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.contact-pill-call:hover { background: var(--color-accent-700); }
.contact-pill-call svg { width: 18px; height: 18px; flex-shrink: 0; }
.contact-pill-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  background: var(--color-whatsapp);
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out);
}
.contact-pill-whatsapp:hover { background: var(--color-whatsapp-700); }
.contact-pill-whatsapp svg { width: 20px; height: 20px; }

/* Same twin-pill idea, full width, for the mobile nav panel */
.nav-contact-pill {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-6);
}
.nav-contact-pill-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  padding: 0 var(--space-3) 0 var(--space-5);
  background: var(--color-primary-900);
  color: #fff;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-contact-pill-call:hover { background: var(--color-accent-700); }
.nav-contact-pill-call svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-contact-pill-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  flex-shrink: 0;
  background: var(--color-whatsapp);
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-contact-pill-whatsapp:hover { background: var(--color-whatsapp-700); }
.nav-contact-pill-whatsapp svg { width: 22px; height: 22px; }

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}
.menu-toggle span {
  width: 22px; height: 2px;
  background: var(--color-primary-900);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .main-nav { display: block; }
  .contact-pill { display: flex; }
  .menu-toggle { display: none; }
}

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  top: 76px;
  left: 0;
  width: 100vw;
  bottom: 0;
  height: calc(100vh - 76px);
  height: calc(100dvh - 76px);
  background: var(--color-surface);
  z-index: 99;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav ul a {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding-top: calc(76px + var(--space-8));
  padding-bottom: var(--space-9);
  background: linear-gradient(180deg, #F3EFE8 0%, var(--color-bg) 60%);
  overflow: hidden;
}
/* On shorter laptop screens the generous vertical rhythm above pushes
   the call-to-action (and most of the illustration) below the fold.
   Tighten the hero's own spacing here — text sizes and layout are
   untouched, only the breathing room shrinks. */
@media (min-width: 1024px) and (max-height: 850px) {
  .hero { padding-top: calc(76px + var(--space-5)); padding-bottom: var(--space-6); }
}
/* On narrow mobile screens the same generous desktop spacing left a
   large empty gap under the fixed header before any content appeared.
   Keep just enough clearance for the header, trim the decorative gap.
   The whole hero rhythm is also compressed here so the call button and
   the Google rating are visible without scrolling on a standard phone —
   this is the primary Ads landing page, so above-the-fold conversion
   matters more on mobile than the generous desktop spacing. */
@media (max-width: 767px) {
  .hero { padding-top: calc(76px + var(--space-4)); padding-bottom: var(--space-7); }
}

.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-accent-700);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.eyebrow svg { width: 16px; height: 16px; }
.eyebrow-clock-hand {
  transform-origin: 12px 12px;
  animation: clock-sweep 4s linear infinite;
}
@keyframes clock-sweep {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-clock-hand { animation: none; }
}

.section-number {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--color-accent);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw + 0.5rem, 3.6rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  font-weight: 600;
}
.hero h1 .accent-soft {
  color: var(--color-primary-900);
  font-style: italic;
  font-weight: 500;
}
.hero h1 .accent {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 500;
}

.hero-lede {
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.25rem);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}
/* Mobile hero compression — placed after the base rules above so the
   cascade actually applies it (same selectors, later source order wins).
   Keeps the call button and Google rating visible without scrolling on
   a standard phone. */
@media (max-width: 767px) {
  .eyebrow { margin-bottom: var(--space-3); font-size: 0.85rem; padding: 6px 14px; }
  .hero h1 { font-size: 1.7rem; margin-bottom: var(--space-3); }
  .hero-lede { font-size: 0.95rem; margin-bottom: var(--space-4); }
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-primary { animation: none; }
}

.hero-microcopy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.hero-microcopy svg { width: 16px; height: 16px; color: var(--color-accent-700); flex-shrink: 0; }

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-900);
  white-space: nowrap;
}
.hero-pill svg { width: 14px; height: 14px; color: var(--color-accent-700); flex-shrink: 0; }
.hero-rating .stars { margin: 0; }
.hero-rating strong { font-family: var(--font-heading); }
.hero-rating span { font-size: 0.85rem; color: var(--color-text-muted); }
.hero-rating:hover strong { text-decoration: underline; }

@media (min-width: 1024px) and (max-height: 850px) {
  .hero h1 { font-size: clamp(2.2rem, 4vw + 0.3rem, 2.9rem); margin-bottom: var(--space-4); }
  .hero-lede { margin-bottom: var(--space-4); }
  .hero-ctas { margin-bottom: var(--space-4); }
  .hero-microcopy { margin-bottom: var(--space-4); }
  .hero-rating { margin-bottom: var(--space-4); }
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-trust-item .icon-badge {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-700);
  flex-shrink: 0;
}
.hero-trust-item .icon-badge svg { width: 20px; height: 20px; }
.hero-trust-item strong { display: block; font-size: 0.95rem; font-family: var(--font-heading); }
.hero-trust-item span { font-size: 0.85rem; color: var(--color-text-muted); }

.hero-media {
  position: relative;
}
.hero-media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  /* Continuously transform-animated while scrolling past the hero
     (see js/main.js scrub parallax) — promote to its own layer up
     front so the browser isn't repainting/re-layering it mid-scroll. */
  will-change: transform;
}
.hero-media-frame img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-media-frame .hero-illus {
  width: 100%; height: 100%; display: block;
}
.illus-key-inner { transform-origin: 0 0; transform: rotate(-32deg); }
.hero-floating-card {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 260px;
}
@media (min-width: 640px) {
  .hero-floating-card { left: -32px; bottom: -24px; }
}
.hero-floating-card .icon-badge {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-floating-card .icon-badge svg { width: 22px; height: 22px; }
.hero-floating-card strong { font-family: var(--font-heading); font-size: 1.05rem; display: block; }
.hero-floating-card span { font-size: 0.82rem; color: var(--color-text-muted); }

.hero-floating-badge {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--color-primary-900);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.hero-floating-badge strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; }
.hero-floating-badge span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }

/* ============================================================
   Stats bar
   ============================================================ */
.stats-bar {
  background: var(--color-primary-900);
  color: #fff;
  padding-block: var(--space-7);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-label {
  font-size: 0.88rem;
  opacity: 0.85;
}

/* ============================================================
   Section generic
   ============================================================ */
.section { padding-block: var(--space-9); }
.section-alt { background: var(--color-surface-alt); }
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--space-4); }
.section-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: var(--space-4);
}
.section-head p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ============================================================
   Services
   ============================================================ */
/* Mobile: a horizontal, snap-scrolling shelf — you swipe through
   services like cards, rather than reading a long stacked column.
   Desktop keeps the grid; this is a genuinely different reading
   pattern, not the same layout squeezed to one column. */
.services-grid {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-5);
  padding-bottom: var(--space-3);
  margin: 0 calc(var(--space-5) * -1);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.services-grid::-webkit-scrollbar { display: none; }
.services-grid .service-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .services-grid .service-card { flex: initial; }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  /* Pages with only 4 services (e.g. campaign landing pages) would
     otherwise leave a lone card stranded on a 2-slot-empty row —
     switch to a balanced 2x2 grid instead. */
  .services-grid:has(.service-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.service-card:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-sm);
  transition-duration: 100ms;
}
.service-card:active .icon-badge {
  background: var(--color-accent);
  color: #fff;
}
.service-card .icon-badge {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-primary-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.service-card:hover .icon-badge {
  background: var(--color-accent);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.service-card .icon-badge svg { width: 26px; height: 26px; }
.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-3);
}
.service-price {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-accent-700);
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  margin-bottom: var(--space-3);
}
.service-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}
.service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-700);
}
.service-card .card-link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .card-link svg { transform: translateX(4px); }

/* ============================================================
   Why us
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: 0.9fr 1.1fr; }
}
.why-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1;
  /* Continuously transform-animated while scrolling past it (scrub
     parallax in js/main.js) — pre-promote to its own layer. */
  will-change: transform;
}
.why-media img,
.why-media .heritage-illus {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Only the plain outer ring turns — the seal, the text and the
   emblem stay upright and readable at all times. */
.heritage-ring {
  transform-origin: 250px 250px;
  animation: ring-spin 40s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .heritage-ring { animation: none; }
}

.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .feature-list { grid-template-columns: repeat(2, 1fr); }
}
.feature-item {
  display: flex;
  gap: var(--space-4);
}
.feature-item > div { min-width: 0; }
.feature-item .icon-badge {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-item .icon-badge svg { width: 22px; height: 22px; }
.feature-item h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.feature-item p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ============================================================
   Process
   ============================================================ */
/* Mobile: a left-aligned timeline (icon + text in a row, connected by
   a running vertical line) — a distinct reading pattern from the
   desktop's horizontal, centered flow, not the same grid squeezed down. */
.process-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 38px;
  left: 32px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--color-border) 0 8px, transparent 8px 15px);
  background-size: 2px 30px;
  animation: timeline-flow 1.8s linear infinite;
  z-index: 0;
}
@media (min-width: 768px) {
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-left: 0;
  }
  .process-grid::before {
    top: 32px; bottom: auto;
    left: 12%; right: 12%; width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-border) 0 10px, transparent 10px 18px);
    background-size: 28px 2px;
    animation: timeline-flow-h 1.4s linear infinite;
  }
}
@keyframes timeline-flow { to { background-position: 0 -30px; } }
@keyframes timeline-flow-h { to { background-position: -28px 0; } }
@media (prefers-reduced-motion: reduce) {
  .process-grid::before { animation: none; }
}
/* Shorten the stacked 4-step timeline on mobile — it was adding a lot of
   scroll length before visitors reached the contact form. Tighter gap and
   smaller step markers, same content and structure. */
@media (max-width: 767px) {
  .process-grid { gap: var(--space-4); }
  .process-grid::before { left: 24px; }
  .process-step .step-num { width: 48px; height: 48px; font-size: 0.95rem; }
}
.process-step {
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .process-step { text-align: center; display: block; }
}
.process-step .step-num {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 2px solid var(--color-primary-900);
  color: var(--color-primary-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
}
@media (min-width: 768px) {
  .process-step .step-num { margin: 0 auto var(--space-4); }
}
.process-step:nth-child(odd) .step-num { border-color: var(--color-accent); color: var(--color-accent); }
.process-step h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.process-step p { color: var(--color-text-muted); font-size: 0.9rem; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials-wrap { position: relative; overflow: hidden; }
.testimonials-track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--dur-slow) var(--ease-out);
}
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  flex: 0 0 100%;
}
@media (min-width: 768px) {
  .testimonial-card { flex: 0 0 calc(50% - var(--space-5) / 2); }
}
@media (min-width: 1024px) {
  .testimonial-card { flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3); }
  /* Pages with only 2 testimonials (e.g. campaign landing pages) would
     otherwise leave an empty 33%-wide gap where a 3rd card would go —
     size the two cards to fill the row instead. */
  .testimonials-track:has(.testimonial-card:nth-child(2):last-child) .testimonial-card {
    flex: 0 0 calc(50% - var(--space-5) / 2);
  }
}
.stars { display: flex; gap: 2px; color: var(--color-star); margin-bottom: var(--space-4); }
.stars svg { width: 18px; height: 18px; }
.testimonial-card p.quote {
  font-size: 0.98rem;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-author .avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.92rem; }
.testimonial-author span { font-size: 0.82rem; color: var(--color-text-muted); }

.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.testimonials-nav button {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.testimonials-nav button:hover { background: var(--color-primary-900); color: #fff; border-color: var(--color-primary-900); }
.testimonials-nav svg { width: 20px; height: 20px; }

.google-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  margin-top: var(--space-6);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.google-rating-badge:hover { border-color: var(--color-primary-900); box-shadow: var(--shadow-sm); }
.google-rating-badge strong { font-family: var(--font-heading); }

/* ============================================================
   Zone d'intervention
   ============================================================ */
.zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .zone-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}
.zone-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
  margin-block: var(--space-6);
}
.zone-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  font-size: 0.95rem;
}
.zone-list svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }
.zone-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}
.zone-list a:hover { color: var(--color-accent-800); text-decoration: underline; }
.zone-list a:hover svg { color: var(--color-accent-800); }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* Continuously transform-animated while scrolling past it (scrub
     parallax in js/main.js) — pre-promote to its own layer. */
  will-change: transform;
  aspect-ratio: 4/3;
  border: 1px solid var(--color-border);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.map-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
}
.faq-question .chevron { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
.faq-item.is-open .chevron { transform: rotate(180deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta {
  position: relative;
  padding-block: var(--space-9);
  background: var(--color-primary-900) url('../assets/pattern-keys.svg');
  background-size: 120px 120px;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(193,105,75,0.30), rgba(22,35,46,0.75));
  z-index: 1;
}
.final-cta-content { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .final-cta-primary { animation: none; }
}
.final-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: var(--space-4); }
.final-cta p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-7); font-size: 1.05rem; }
.final-cta .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
}
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.contact-info-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info-item .icon-badge {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-accent-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-item .icon-badge svg { width: 22px; height: 22px; }
.icon-badge-ring svg { transform-origin: 50% 0%; animation: icon-ring 4s ease-in-out infinite; }
@keyframes icon-ring {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(14deg); }
  94% { transform: rotate(-10deg); }
  96% { transform: rotate(6deg); }
  98% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-badge-ring svg { animation: none; }
}
.contact-info-item strong { display: block; font-family: var(--font-heading); margin-bottom: 2px; }
.contact-info-item span, .contact-info-item a { color: var(--color-text-muted); font-size: 0.95rem; }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (min-width: 640px) {
  .form-row.two-col { grid-template-columns: 1fr 1fr; }
}
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}
.form-field .required { color: var(--color-accent); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 1rem;
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--color-primary-600);
  outline: none;
}
.form-field small { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: 0.82rem; }
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: #E7F5EC; color: #1F6B42; }
.form-status.is-error { background: #FBEAE6; color: #A5553B; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--color-primary-900);
  color: rgba(255,255,255,0.75);
  padding-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
/* Text wordmark, not the graphical logo.png: that logo has coloured
   pill shapes ("EXPRESS", "DEPUIS 1994") with white text inside them,
   and brightness(0)/invert(1) — needed to turn the navy parts white
   against this dark footer — flattens those pills and their white
   text to the same solid white, erasing the lettering. A text
   wordmark sidesteps the problem entirely and stays legible. */
.footer-brand .footer-wordmark {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
}
.footer-brand .footer-wordmark .tag {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
}
.footer-brand p { font-size: 0.9rem; max-width: 32ch; margin-bottom: var(--space-5); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--color-accent); }
.footer-social svg { width: 18px; height: 18px; }

.footer-col h3 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a, .footer-col span { font-size: 0.9rem; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.82rem;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Sticky mobile call-to-action bar (conversion-critical for
   paid traffic: the phone number stays reachable at all times)
   ============================================================ */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  width: 100vw;
  top: 100dvh;
  transform: translateY(-100%);
  transition: transform var(--dur-fast, 0.2s) var(--ease-out, ease);
  z-index: 95;
  padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(22, 35, 46, 0.12);
}
.mobile-cta-bar.is-hidden-at-top { transform: translateY(0%); }
/* One continuous pill split into a call segment + a WhatsApp segment,
   instead of two separate shapes with a gap — reads as a single unit. */
.mobile-cta-bar-actions {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mobile-cta-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  background: var(--color-primary-900);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}
.mobile-cta-bar-link svg { width: 22px; height: 22px; flex-shrink: 0; }
.mobile-cta-bar-link span { font-family: var(--font-heading); font-size: 1.05rem; white-space: nowrap; }
.mobile-cta-bar-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  background: var(--color-whatsapp);
  color: #fff;
}
.mobile-cta-bar-whatsapp svg { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .mobile-cta-bar { display: none; }
}
/* Ring pulse via transform/opacity on a pseudo-element, not box-shadow on
   the button itself. box-shadow isn't a compositor-only property — Chrome
   was repainting these buttons on every animation frame, continuously,
   for as long as the page was open (not just while scrolling), which was
   the real cause of the page-wide jank. transform + opacity are both
   compositor-only, so this costs effectively nothing at rest. */
.mobile-cta-bar-actions, .hero-cta-primary, .final-cta-primary { position: relative; }
.mobile-cta-bar-actions::after, .hero-cta-primary::after, .final-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(193,105,75,0.55);
  opacity: 0;
  animation: pulse-ring 2.6s infinite;
  pointer-events: none;
}
.mobile-cta-bar-actions::after { animation-duration: 2.4s; }
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar-actions::after, .hero-cta-primary::after, .final-cta-primary::after { animation: none; }
}

/* ============================================================
   Reveal animation hooks (GSAP targets via JS, base state here)
   ============================================================ */
[data-reveal] { opacity: 0; }
.no-js [data-reveal],
.no-gsap [data-reveal] { opacity: 1; }

/* Garage door illustration (porte-garage page only) — visible by
   default, not gated behind JS. It only gets a subtle tilt loop once
   GSAP is ready; if that animation stalls for any reason, the door
   stays put looking like a normal closed door instead of vanishing. */
.garage-door-panel { will-change: transform; }

/* ============================================================
   Utility
   ============================================================ */
.text-accent { color: var(--color-accent); }

/* ============================================================
   Legal pages (mentions légales, politique de confidentialité)
   ============================================================ */
.legal-content {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-9);
}
.legal-content .updated-at {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-7);
}
.legal-content h2 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-size: 1.05rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.legal-content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.legal-content ul {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
}
.legal-content li { margin-bottom: var(--space-2); }
.legal-content a { color: var(--color-accent-700); text-decoration: underline; }
.legal-content strong { color: var(--color-text); }