/* ============================================
   LS PLOMBERIE — Premium Agency-Tier Styles
   Skills: emil-design-eng + impeccable + high-end-visual-design
   ============================================ */
:root { color-scheme: light only; }

/* --- Self-hosted fonts (RGPD: no Google Fonts external call) --- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens — hex fallbacks for browsers without OKLCH (Chrome<111, Samsung Internet old) --- */
:root {
  --bg:          #f7f3ee;
  --bg-raised:   #ede8e2;
  --bg-card:     #fdfcfb;
  --accent:      #9b2335;
  --accent-h:    #b5283d;
  --accent-soft: rgba(155, 35, 53, 0.08);
  --navy:        #1e2242;
  --navy-m:      #2e3462;
  --text:        #1a1e38;
  --text-m:      #5c6285;
  --text-d:      #8e94ad;
  --surface:     rgba(26, 30, 56, 0.04);
  --border:      rgba(26, 30, 56, 0.08);
  --border-h:    rgba(26, 30, 56, 0.14);

  --r-xl: 1.5rem;
  --r-lg: 1.25rem;
  --r-md: 0.875rem;
  --r-sm: 0.5rem;

  /* Emil curves */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-d: 'DM Serif Display', Georgia, serif;
  --font-m: 'JetBrains Mono', monospace;
}

/* --- Tokens — OKLCH override for modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+) --- */
@supports (color: oklch(0 0 0)) {
  :root {
    --bg:          oklch(0.97 0.004 80);
    --bg-raised:   oklch(0.94 0.005 80);
    --bg-card:     oklch(0.99 0.002 80);
    --accent:      oklch(0.52 0.19 12);
    --accent-h:    oklch(0.58 0.19 12);
    --accent-soft: oklch(0.52 0.19 12 / 0.08);
    --navy:        oklch(0.22 0.04 260);
    --navy-m:      oklch(0.30 0.04 260);
    --text:        oklch(0.20 0.035 260);
    --text-m:      oklch(0.42 0.025 260);
    --text-d:      oklch(0.58 0.015 260);
    --surface:     oklch(0.20 0.035 260 / 0.04);
    --border:      oklch(0.20 0.035 260 / 0.08);
    --border-h:    oklch(0.20 0.035 260 / 0.14);
  }
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* Supprime le highlight de tap bleu/gris sur iOS et Android — site premium */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* --- Splash — carte de visite --- */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s, transform 0.7s var(--ease);
}
.splash.done { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.04); }
.splash-inner { text-align: center; }
.splash-logo { margin-bottom: 24px; }
.splash-ls {
  font-family: var(--font-d); font-size: clamp(5rem, 12vw, 9rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--navy);
  font-style: normal; letter-spacing: 0.15em; line-height: 1;
  display: block;
  animation: splashUp 0.8s var(--ease) 0.2s both;
}
.splash-plomberie {
  font-family: var(--font); font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 600; color: transparent;
  -webkit-text-stroke: 1.5px var(--navy);
  text-transform: uppercase; letter-spacing: 0.35em;
  display: block; margin-top: 8px;
  animation: splashUp 0.8s var(--ease) 0.4s both;
}
.splash-line {
  width: 56px; height: 2px; background: var(--accent);
  margin: 24px auto; opacity: 0.5;
  animation: splashUp 0.6s var(--ease) 0.55s both;
}
.splash-slogan {
  font-family: var(--font-m); font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-m); margin-bottom: 8px;
  animation: splashUp 0.6s var(--ease) 0.65s both;
}
.splash-location {
  font-size: 1.2rem; color: var(--text-d);
  animation: splashUp 0.6s var(--ease) 0.75s both;
}
.splash-enter {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 40px; padding: 14px 36px;
  background: var(--navy); color: #faf8f5; color: oklch(0.97 0.004 80);
  border-radius: 100px; font-size: 1rem; font-weight: 500;
  transition: background 0.25s var(--ease), transform 160ms var(--ease);
  animation: splashUp 0.6s var(--ease) 0.9s both;
}
.splash-enter:hover { background: var(--navy-m); }
.splash-enter:active { transform: scale(0.97); }
@keyframes splashUp {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* --- Nav — floating pill, detached --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 16px 20px;
  opacity: 0; transition: padding 0.3s var(--ease), opacity 0.4s var(--ease);
}
.nav.visible { opacity: 1; }
.nav.scrolled { padding: 10px 20px; }
.nav-pill {
  display: flex; align-items: center; gap: 6px;
  max-width: 700px; margin: 0 auto;
  background: rgba(253,252,251,0.75);
  background: oklch(0.99 0.002 80 / 0.75);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 5px 5px 18px;
  box-shadow: 0 4px 24px rgba(26,30,56,0.06);
  box-shadow: 0 4px 24px oklch(0.20 0.035 260 / 0.06);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.nav.scrolled .nav-pill {
  background: rgba(253,252,251,0.92);
  background: oklch(0.99 0.002 80 / 0.92);
  border-color: var(--border-h);
  box-shadow: 0 8px 32px rgba(26,30,56,0.1);
  box-shadow: 0 8px 32px oklch(0.20 0.035 260 / 0.1);
}
.nav-logo { font-family: var(--font-d); font-size: 1.1rem; white-space: nowrap; margin-right: auto; display: flex; align-items: baseline; gap: 4px; }
.logo-ls { color: transparent; -webkit-text-stroke: 1px var(--navy); }
.logo-plomberie { font-family: var(--font); font-weight: 600; font-size: 0.72rem; color: transparent; -webkit-text-stroke: 0.8px var(--navy); text-transform: uppercase; letter-spacing: 0.3em; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-size: 0.88rem; font-weight: 500; padding: 8px 15px;
  border-radius: 100px; transition: background 0.2s var(--ease);
}
.nav-links a:hover { background: var(--surface); }
.nav-cta {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fcfaf8; color: oklch(0.98 0.003 80);
  padding: 9px 16px; border-radius: 100px;
  font-size: 0.88rem; font-weight: 600; white-space: nowrap;
  transition: background 0.2s var(--ease), transform 160ms var(--ease);
}
.nav-cta:active { transform: scale(0.97); }
.nav-cta:hover { background: var(--accent-h); }
.cta-icon-wrap { display: flex; }

.hamburger { display: none; width: 34px; height: 34px; position: relative; flex-shrink: 0; }
.hamburger span {
  position: absolute; left: 7px; right: 7px; height: 1.5px;
  background: var(--navy); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.hamburger span:first-child { top: 12px; }
.hamburger span:last-child { top: 20px; }
.hamburger.active span:first-child { transform: translateY(4px) rotate(45deg); }
.hamburger.active span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(28,34,66,0.96);
  background: oklch(0.22 0.04 260 / 0.96);
  backdrop-filter: blur(40px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
.mobile-menu.active { opacity: 1; visibility: visible; }
.mobile-menu-inner { text-align: center; }
.mobile-link {
  display: block; font-family: var(--font-d); font-size: 2.2rem; margin-bottom: 14px;
  color: #f7f3ee;
  color: oklch(0.97 0.004 80);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mobile-menu.active .mobile-link { opacity: 1; transform: none; }
.mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 80ms; }
.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 130ms; }
.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 180ms; }
.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 230ms; }
.mobile-phone {
  display: inline-block; margin-top: 28px;
  font-family: var(--font-m); font-size: 1rem; color: #faf8f5; color: oklch(0.97 0.004 80);
  padding: 10px 24px; border: 1px solid rgba(250,248,245,0.2); border: 1px solid oklch(0.97 0.004 80 / 0.2);
  border-radius: 100px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.35s 0.28s var(--ease), transform 0.35s 0.28s var(--ease), border-color 0.25s;
}
.mobile-menu.active .mobile-phone { opacity: 1; transform: none; }

/* --- Sections --- */
.section { position: relative; overflow: hidden; }
.section-services,
.section-zone,
.section-contact { padding: clamp(80px, 12vw, 160px) 0 60px; }

/* --- Hero --- */
.hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg-img {
  width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%;
  will-change: transform;
  animation: kenBurns 20s var(--ease) infinite alternate;
}
@keyframes kenBurns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.15) translate(-1.5%, -1%); }
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,34,66,0.7) 0%, rgba(28,34,66,0.82) 60%, #f7f3ee 100%); background: linear-gradient(to bottom, oklch(0.20 0.04 260 / 0.7) 0%, oklch(0.20 0.04 260 / 0.82) 60%, var(--bg) 100%); }
.hero-content { position: relative; z-index: 1; padding-top: 100px; }
.hero-text { max-width: 640px; }
/* Section tag */
.section-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-m); font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 18px;
}
.tag-num, .tag-dash { display: none; }

/* On dark overlays (hero, expertise) */
.hero .section-tag { color: #d9dce8; color: oklch(0.90 0.008 260); }
.section-tag-light { color: #c5a080; color: oklch(0.80 0.01 12); }
.hero-title {
  font-family: var(--font-d); font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 400; line-height: 1.06; margin-bottom: 24px;
}
.line { display: block; }
.line-accent { color: var(--accent); font-style: italic; }
.hero-desc { font-size: 1rem; line-height: 1.7; color: #c2c6d8; color: oklch(0.82 0.008 260); max-width: 480px; margin-bottom: 36px; text-shadow: 0 1px 8px rgba(19,22,46,0.5); text-shadow: 0 1px 8px oklch(0.15 0.04 260 / 0.5); }
.hero-content { color: #faf8f5; color: oklch(0.97 0.004 80); }
.hero-title { color: #faf8f5; color: oklch(0.97 0.004 80); }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-d); z-index: 2;
}
.scroll-cue-line { width: 1px; height: 40px; background: var(--text-d); animation: scrollPulse 2.5s infinite; }
@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; transform: scaleY(0.5); transform-origin: top; }
  50% { opacity: 0.7; transform: scaleY(1); }
}
.scroll-cue span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; font-family: var(--font-m); }

/* --- Buttons — button-in-button trailing icon (high-end skill) --- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fcfaf8; color: oklch(0.98 0.003 80);
  padding: 13px 14px 13px 24px; border-radius: 100px;
  font-weight: 600; font-size: 0.9rem;
  transition: background 0.2s var(--ease), transform 160ms var(--ease);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:hover { background: var(--accent-h); }
.btn-trailing {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(252,250,248,0.2); background: oklch(0.98 0.003 80 / 0.2);
  transition: transform 0.25s var(--ease);
}
.btn-primary:hover .btn-trailing { transform: translate(2px, -1px) scale(1.05); }

.btn-light { background: var(--navy); color: #faf8f5; color: oklch(0.97 0.004 80); }
.btn-light:hover { background: var(--navy-m); }
.btn-light .btn-trailing { background: rgba(250,248,245,0.15); background: oklch(0.97 0.004 80 / 0.15); }

.btn-ghost {
  display: inline-flex; align-items: center;
  padding: 13px 22px; border: 1px solid var(--border);
  border-radius: 100px; font-size: 0.85rem; font-weight: 500;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 160ms var(--ease);
}
.btn-ghost:active { transform: scale(0.97); }
.btn-ghost:hover { border-color: var(--border-h); background: var(--surface); }
/* Ghost on dark backgrounds (hero, CTA) */
.btn-ghost-light { border-color: rgba(250,248,245,0.25); border-color: oklch(0.97 0.004 80 / 0.25); color: #faf8f5; color: oklch(0.97 0.004 80); }
.btn-ghost-light:hover { background: rgba(250,248,245,0.1); background: oklch(0.97 0.004 80 / 0.1); border-color: rgba(250,248,245,0.4); border-color: oklch(0.97 0.004 80 / 0.4); }

/* --- Section header --- */
.section-intro { margin-bottom: 56px; }
.section-title {
  font-family: var(--font-d); font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400; line-height: 1.1;
}
.section-title-light { color: var(--text); }

/* --- Services — double-bezel card architecture --- */
.section-services { background: linear-gradient(175deg, var(--bg) 0%, #f0ece6 100%); background: linear-gradient(175deg, var(--bg) 0%, oklch(0.95 0.006 80) 100%); }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Double-bezel: outer shell + inner core */
.card-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 6px;
  transition: border-color 0.25s var(--ease);
}
.card-shell:hover { border-color: var(--border-h); }
.card-inner {
  background: var(--bg-card);
  border-radius: calc(var(--r-xl) - 6px);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(26,30,56,0.06), inset 0 1px 0 rgba(253,252,251,0.8);
  box-shadow: 0 4px 20px oklch(0.20 0.035 260 / 0.06), inset 0 1px 0 oklch(0.99 0.002 80 / 0.8);
}
.card-visual { height: 200px; overflow: hidden; position: relative; }
.card-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.card-shell:hover .card-visual img { transform: scale(1.04); }

/* Reveal rideau — bloc accent qui glisse */
.card-visual::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}
.anim.visible .card-visual::after {
  transform: scaleX(0);
}

/* 3D Shine overlay — follows mouse via JS */
.card-inner { position: relative; }
.card-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: calc(var(--r-xl) - 6px);
  background: radial-gradient(circle 280px at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(250,248,245,0.25) 0%, transparent 70%);
  background: radial-gradient(circle 280px at var(--shine-x, 50%) var(--shine-y, 50%),
    oklch(0.97 0.004 80 / 0.25) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.card-shell:hover .card-shine { opacity: 1; }

.card-body { padding: 26px; }
.card-body h3 { font-family: var(--font-d); font-size: 1.4rem; margin-bottom: 10px; }
.card-body p { font-size: 0.85rem; line-height: 1.6; color: var(--text-m); margin-bottom: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span {
  font-size: 0.75rem; font-weight: 500; padding: 4px 11px;
  border-radius: 100px; background: var(--surface); color: var(--text-m);
  letter-spacing: 0.02em;
}


/* --- Zone --- */
.section-zone { background: linear-gradient(170deg, #f0ece6 0%, #e5e8f2 50%, #f3efe9 100%); background: linear-gradient(170deg, oklch(0.95 0.006 80) 0%, oklch(0.94 0.008 260) 50%, oklch(0.96 0.005 80) 100%); }
.zone-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; }
.zone-desc { font-size: 0.92rem; line-height: 1.7; color: var(--text-m); max-width: 380px; margin-top: 18px; }
.zone-card-shell { padding: 6px; }
.zone-card { position: relative; aspect-ratio: 4/3; }
.zone-img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-xl) - 6px); }

/* Reveal rideau zone */
.zone-card { overflow: hidden; }
.zone-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1; border-radius: calc(var(--r-xl) - 6px);
}
.anim.visible .zone-card::before {
  transform: scaleX(0);
}
.zone-overlay {
  position: absolute; inset: 0;
  border-radius: calc(var(--r-xl) - 6px);
  background: linear-gradient(to top, rgba(20,26,54,0.80) 0%, rgba(20,26,54,0.30) 50%, rgba(20,26,54,0.04) 100%);
  background: linear-gradient(to top, oklch(0.17 0.04 260 / 0.80) 0%, oklch(0.17 0.04 260 / 0.30) 50%, oklch(0.17 0.04 260 / 0.04) 100%);
  display: flex; align-items: flex-end; padding: 24px;
}
.zone-cities { display: flex; flex-wrap: wrap; gap: 6px; }
.city {
  font-size: 0.72rem; font-weight: 500; padding: 5px 12px; border-radius: 100px;
  background: rgba(22,27,60,0.72);
  background: oklch(0.17 0.05 260 / 0.72);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap; transition: background 0.2s var(--ease), border-color 0.2s;
  color: #fff; font-weight: 500;
  text-decoration: none;
}
.city-main {
  background: rgba(155,35,53,0.75);
  border-color: rgba(155,35,53,0.5);
  font-weight: 700;
}
.city-accent {
  background: var(--accent);
  border-color: transparent;
  font-weight: 600;
}

/* --- CTA --- */
/* --- Shared photo background (CTA + Contact) --- */
.cta-bg { position: absolute; inset: 0; }
.cta-bg-img { width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; will-change: transform; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,34,66,0.55) 0%, rgba(28,34,66,0.78) 100%); background: linear-gradient(to bottom, oklch(0.20 0.04 260 / 0.55) 0%, oklch(0.20 0.04 260 / 0.78) 100%); }

/* --- Contact — Centered CTA (photo background) --- */
.section-contact { position: relative; overflow: hidden; }
.contact-container { position: relative; z-index: 1; }

.contact-center {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}
.contact-center .section-tag { margin-bottom: 20px; }
.contact-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.contact-title {
  font-family: var(--font-d);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  color: #faf8f5; color: oklch(0.97 0.004 80);
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(19,22,46,0.4); text-shadow: 0 2px 12px oklch(0.15 0.04 260 / 0.4);
}
.contact-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #c2c6d8; color: oklch(0.82 0.008 260);
  max-width: 460px;
  margin: 0 auto 36px;
  text-shadow: 0 1px 6px rgba(19,22,46,0.4); text-shadow: 0 1px 6px oklch(0.15 0.04 260 / 0.4);
}

/* Big phone CTA button */
.contact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(520px, 90vw);
  background: var(--accent);
  color: #fcfaf8; color: oklch(0.98 0.003 80);
  padding: 18px 18px 18px 28px;
  border-radius: 100px;
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 160ms var(--ease), box-shadow 0.3s var(--ease);
}
.contact-cta:hover {
  background: var(--accent-h);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(155,35,53,0.25); box-shadow: 0 12px 40px oklch(0.52 0.19 12 / 0.25);
}
.contact-cta:active { transform: scale(0.98); }

.contact-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(252,250,248,0.18); background: oklch(0.98 0.003 80 / 0.18);
  flex-shrink: 0;
  transition: background 0.25s var(--ease);
}
.contact-cta:hover .contact-cta-icon { background: rgba(252,250,248,0.28); background: oklch(0.98 0.003 80 / 0.28); }

.contact-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(252,250,248,0.15); background: oklch(0.98 0.003 80 / 0.15);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), background 0.25s var(--ease);
}
.contact-cta:hover .contact-cta-arrow {
  transform: translate(2px, -2px) scale(1.06);
  background: rgba(252,250,248,0.25); background: oklch(0.98 0.003 80 / 0.25);
}

/* Email link under CTA */
.contact-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(520px, 90vw);
  margin-top: 0;
  padding: 18px 18px 18px 28px;
  border: 1px solid rgba(250,248,245,0.25); border: 1px solid oklch(0.97 0.004 80 / 0.25);
  border-radius: 100px;
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-decoration: none;
  color: #faf8f5; color: oklch(0.97 0.004 80);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 160ms var(--ease), box-shadow 0.3s var(--ease);
}
.contact-email:hover {
  border-color: rgba(250,248,245,0.45); border-color: oklch(0.97 0.004 80 / 0.45);
  background: rgba(250,248,245,0.06); background: oklch(0.97 0.004 80 / 0.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(19,22,46,0.25); box-shadow: 0 12px 40px oklch(0.15 0.04 260 / 0.25);
}
.contact-email-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(250,248,245,0.15); background: oklch(0.97 0.004 80 / 0.15);
  flex-shrink: 0;
  color: #faf8f5; color: oklch(0.97 0.004 80);
  transition: background 0.25s var(--ease);
}
.contact-email:hover .contact-email-icon { background: rgba(250,248,245,0.25); background: oklch(0.97 0.004 80 / 0.25); }
.contact-email-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(250,248,245,0.12); background: oklch(0.97 0.004 80 / 0.12);
  flex-shrink: 0;
  color: #faf8f5; color: oklch(0.97 0.004 80);
  transition: transform 0.3s var(--ease), background 0.25s var(--ease);
}
.contact-email:hover .contact-email-arrow {
  transform: translate(2px, -2px) scale(1.06);
  background: rgba(250,248,245,0.22); background: oklch(0.97 0.004 80 / 0.22);
}

/* Info row — address, hours, devis */
.contact-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 28px 32px;
  background: rgba(250,248,245,0.07); background: oklch(0.97 0.004 80 / 0.07);
  border: 1px solid rgba(250,248,245,0.15); border: 1px solid oklch(0.97 0.004 80 / 0.15);
  border-radius: var(--r-xl);
  max-width: 740px;
  margin: 0 auto;
  backdrop-filter: blur(8px);
}
.contact-info-item { text-align: center; }
.contact-info-label {
  display: block;
  font-family: var(--font-m);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 6px;
  font-weight: 500;
}
.contact-info-val {
  font-size: 1rem;
  font-weight: 700;
  color: #dfe1eb; color: oklch(0.92 0.006 260);
  line-height: 1.5;
}
.contact-info-sep {
  width: 1px;
  height: 36px;
  background: rgba(250,248,245,0.18); background: oklch(0.97 0.004 80 / 0.18);
  flex-shrink: 0;
}

/* --- Testimonials — Auto-scroll carousel --- */
.section-testi {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
  overflow: hidden;
}
.testi-bg { position: absolute; inset: 0; }
.testi-bg-img { width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; will-change: transform; }
.testi-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,34,66,0.72) 0%, rgba(28,34,66,0.82) 100%); background: linear-gradient(to bottom, oklch(0.20 0.04 260 / 0.72) 0%, oklch(0.20 0.04 260 / 0.82) 100%); }
.testi-subtitle {
  font-size: 0.85rem; color: #adb3ce; color: oklch(0.75 0.01 260); margin-top: 10px;
}
.section-testi .container { position: relative; z-index: 1; }
.testi-overflow {
  position: relative; z-index: 1;
  overflow: hidden;
  margin: 48px 0 56px;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.testi-track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}
.testi-card {
  flex-shrink: 0;
  width: 320px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 28px 24px;
  border-radius: var(--r-lg);
  background: rgba(250,248,245,0.08); background: oklch(0.97 0.004 80 / 0.08);
  border: 1px solid rgba(250,248,245,0.12); border: 1px solid oklch(0.97 0.004 80 / 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.testi-card:hover {
  border-color: rgba(250,248,245,0.22); border-color: oklch(0.97 0.004 80 / 0.22);
  background: rgba(250,248,245,0.12); background: oklch(0.97 0.004 80 / 0.12);
}
.testi-stars {
  color: #c09030; color: oklch(0.72 0.17 70);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.testi-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #ece8e3; color: oklch(0.92 0.005 80);
  flex: 1;
  margin-bottom: 18px;
}
.testi-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}
.testi-author strong {
  color: #f3f0ec; color: oklch(0.95 0.004 80);
  font-weight: 600;
}
.testi-author span {
  color: #8a90a8; color: oklch(0.65 0.01 260);
  font-family: var(--font-m);
  font-size: 0.65rem;
}

/* --- Partenaires / Certifications — Light section --- */
.section-certif {
  padding: clamp(60px, 8vw, 100px) 0;
  background: linear-gradient(175deg, var(--bg) 0%, #f0ece6 100%);
  background: linear-gradient(175deg, var(--bg) 0%, oklch(0.95 0.006 80) 100%);
}
.certif-section {
  padding-top: 0;
}
.certif-header {
  text-align: center;
  margin-bottom: 32px;
}
.certif-title {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--text);
  display: block;
  margin-bottom: 10px;
}
.certif-desc {
  font-size: 0.88rem;
  color: var(--text-m);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.65;
}
.certif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.certif-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 5px;
  transition: border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.certif-card:hover { border-color: var(--border-h); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(26,30,56,0.08); box-shadow: 0 8px 28px oklch(0.20 0.035 260 / 0.08); }
.certif-card-inner {
  background: var(--bg-card);
  border-radius: calc(var(--r-xl) - 5px);
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.certif-logo {
  height: 80px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin-bottom: 14px;
}
.certif-name {
  display: block;
  font-family: var(--font-d);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 4px;
}
.certif-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-m);
  line-height: 1.4;
}

/* --- Film Grain Overlay (physical paper feel) --- */
.grain {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* --- Marquee Ticker --- */
.marquee {
  overflow: hidden;
  padding: 28px 0;
  background: var(--bg);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
}
.marquee-reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 30s;
}
.marquee-item {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  padding: 0 24px;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.marquee-item:hover { opacity: 1; }
.marquee-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.5;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Brands marquee — reverse direction, white bg, color logos */
.marquee-brands {
  background: #fff;
  padding: 22px 0;
}
.marquee-brands .marquee-track {
  animation-direction: reverse;
  animation-duration: 30s;
}
.brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
}
.brand-logo {
  height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.35s var(--ease);
}
.brand-logo-wrap:hover .brand-logo { opacity: 1; }
.brand-logo-named {
  gap: 10px;
}
.brand-name {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  opacity: 0.7;
  letter-spacing: 0.02em;
  transition: opacity 0.35s var(--ease);
}
.brand-logo-named:hover .brand-name { opacity: 1; }
.marquee-brands .marquee-dot {
  background: var(--accent);
  opacity: 0.3;
}


/* --- Footer --- */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 0;
  width: 100%;
}
.footer-inner {
  display: flex; justify-content: center; align-items: center;
  font-size: 0.75rem; font-weight: 400;
  color: rgba(250,248,245,0.45); color: oklch(0.97 0.004 80 / 0.45);
  flex-wrap: wrap; gap: 6px 16px;
}
.footer-legal { transition: color 0.2s var(--ease); color: rgba(250,248,245,0.5); color: oklch(0.97 0.004 80 / 0.5); text-decoration: underline; text-decoration-color: rgba(250,248,245,0.2); text-underline-offset: 2px; }
.footer-legal:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* --- Legal page --- */
.legal-page { padding: 120px 0 80px; }
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h1 { font-family: var(--font-d); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 32px; }
.legal-content h2 { font-family: var(--font-d); font-size: 1.3rem; margin: 32px 0 12px; color: var(--text); }
.legal-content p, .legal-content li { font-size: 0.9rem; line-height: 1.75; color: var(--text-m); margin-bottom: 10px; }
.legal-content ul { padding-left: 20px; margin-bottom: 14px; }
.legal-content a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(155,35,53,0.3); text-decoration-color: oklch(0.52 0.19 12 / 0.3); text-underline-offset: 2px; transition: text-decoration-color 0.2s; }
.legal-content a:hover { text-decoration-color: var(--accent); }
.legal-content section { margin-bottom: 8px; }

/* --- Scroll-driven animation support (desktop only, see mobile override) --- */
.services-grid .card-inner {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* --- Animations (Emil stagger, ease-out, no scale(0)) --- */
.anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.anim.visible { opacity: 1; transform: none; }

/* Stagger via --i custom property (50ms per item) */
.anim[style*="--i:0"] { transition-delay: 0ms; }
.anim[style*="--i:1"] { transition-delay: 50ms; }
.anim[style*="--i:2"] { transition-delay: 100ms; }
.anim[style*="--i:3"] { transition-delay: 150ms; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .anim { transition-duration: 0.01ms !important; transform: none !important; opacity: 1 !important; }
  .scroll-cue-line { animation: none; }
  .hero-bg-img { animation: none; }
  .card-visual::after, .zone-card::before { transition-duration: 0.01ms !important; }
  .marquee-track { animation: none !important; }
}

/* --- Safe area insets (iPhone notch / Dynamic Island / home bar) --- */
.nav { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.nav.scrolled { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.scroll-cue { bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* --- will-change — only where JS actively drives transforms --- */
.hero-bg-img { will-change: transform; }
.testi-track { will-change: transform; }
/* Remove expensive will-change from elements driven by IntersectionObserver only */
.hero-title, .hero-desc, .hero-actions { will-change: auto; }
.section-title { will-change: auto; }

/* --- touch-action on carousel (desktop drag: block accidental vertical scroll) --- */
.testi-overflow { touch-action: pan-y; }

/* --- Focus visible — navigation clavier (WCAG 2.1 AA §2.4.7) ---
   :focus-visible ne s'active qu'au clavier, pas au clic souris.
   Préserve l'expérience visuelle des utilisateurs souris tout en
   restant accessible aux utilisateurs clavier/lecteurs d'écran.
----------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Éléments pill — adapter le border-radius au contenant */
.nav-cta:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-light:focus-visible,
.splash-enter:focus-visible,
.nav-links a:focus-visible,
.mobile-link:focus-visible,
.mobile-phone:focus-visible,
.contact-cta:focus-visible,
.contact-email:focus-visible {
  border-radius: 100px;
  outline-offset: 4px;
}
/* Hamburger — carré arrondi */
.hamburger:focus-visible {
  border-radius: var(--r-md);
  outline-offset: 4px;
}
/* Cartes cliquables */
.card-shell:focus-visible,
.certif-card:focus-visible,
.testi-card:focus-visible {
  border-radius: var(--r-xl);
}
/* Liens texte (footer, legal) */
.footer-legal:focus-visible,
.legal-content a:focus-visible {
  border-radius: 2px;
  outline-offset: 2px;
}

/* --- Responsive — 1024px (iPad, tablets) --- */
@media (max-width: 1024px) {
  .trust-grid { gap: 24px 16px; }
  .zone-layout { gap: 48px; }
}

/* --- Responsive — 767px (tablets + phones landscape) --- */
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-cta-text { display: none; }
  .nav-cta { padding: 7px 10px; }
  .hamburger { display: block; }
  .services-grid { grid-template-columns: 1fr; }
  .zone-layout { grid-template-columns: 1fr; gap: 36px; }
  .hero-content { padding-top: 80px; }
  .hero-bg-img { animation: none; object-position: 15% center; }
  .grain { display: none; }
  /* Testimonials — masques inutiles sur mobile */
  .testi-overflow {
    overflow: hidden !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  /* Bg-images: supprimer parallax (height 120% / top -10%) sur mobile */
  .hero-bg-img,
  .testi-bg-img,
  .cta-bg-img {
    height: 100% !important;
    top: 0 !important;
    will-change: auto;
  }
  /* Disable heavy backdrop-filter on mobile for GPU relief */
  .contact-info-row { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .testi-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Nav pill — solid background instead of blur on mobile */
  .nav-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(253,252,251,0.97);
  }
  .nav.scrolled .nav-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(253,252,251,0.99);
  }
  /* Mobile menu — solid background */
  .mobile-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(0.22 0.04 260 / 0.99);
  }
  /* Kill will-change and backface-visibility on non-animated elements */
  .services-grid .card-inner {
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  /* Kill 40+ .anim GPU layers -- show all immediately on mobile */
  .anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Zone card: retirer aspect-ratio pour que toutes les villes soient visibles */
  .zone-card {
    aspect-ratio: auto; min-height: clamp(280px, 80vw, 360px);
    will-change: auto;
    transform-style: flat;
  }
  .zone-img { position: absolute; inset: 0; }

  /* Kill reveal pseudo-elements -- they create layers during scroll */
  .card-visual::after,
  .zone-card::before { display: none; }

  /* Kill continuous CSS animation */
  .scroll-cue-line { animation: none; opacity: 0.45; transform: none; }

  /* Kill box-shadow on fixed nav element */
  .nav-pill { box-shadow: none !important; }

  /* Kill all hover transitions -- hover does not exist on touch */
  .card-shell, .card-inner, .card-visual img,
  .btn-primary, .btn-ghost, .btn-trailing,
  .nav-pill, .nav,
  .contact-cta,
  .contact-cta-icon, .contact-cta-arrow,
  .contact-email, .contact-email-icon, .contact-email-arrow,
  .certif-card,
  .city { transition: none !important; }

  /* Isolate fixed nav from rest of page layout */
  .nav { contain: layout style; }

  /* Kill backdrop-filter on city chips */
  .city {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Shorten splash fade so non-passive scroll block lasts 300ms not 700ms */
  .splash { transition-duration: 0.3s !important; }

  /* Remove overflow:hidden on .section base -- prevents iOS repaints
     when scrolling past absolute-positioned children */
  .section { overflow: visible; }
  /* Keep overflow hidden only where bg images need clipping */
  .hero,
  .section-testi,
  .section-contact { overflow: hidden; }

  /* Remove text-shadow -- forces rasterization on every scroll frame */
  .hero-desc,
  .contact-title,
  .contact-desc,
  .section-zone-local .section-title { text-shadow: none !important; }

  /* Touch targets: WCAG 44x44px minimum */
  .hamburger { min-width: 44px; min-height: 44px; }
  .city { min-height: 44px; display: inline-flex; align-items: center; }

  /* Active state feedback for touch */
  .city:active { opacity: 0.7; }
  .mobile-link:active { opacity: 0.7; }
  .btn-primary:active, .btn-ghost:active { opacity: 0.8; }

  /* Remove box-shadow on card-inner -- reduces composite layers */
  .card-inner { box-shadow: none !important; }

  /* Testi-track: CSS animation auto-promotes, will-change is redundant */
  .testi-track { will-change: auto; }

  /* Marquee containment -- isolates layout from rest of page */
  .marquee { contain: layout style; isolation: isolate; }

  /* Nav: kill transition on mobile -- padding/opacity changes during scroll
     direction change trigger style recalc + recomposite on iOS */
  .nav { transition: none !important; }

  /* Nav pill: reduce border-radius -- 100px on fixed elements is expensive
     to composite on iOS during scroll direction change */
  .nav-pill { border-radius: 20px; }

  /* Sections: remove position:relative where not needed -- creates stacking
     contexts that iOS must recalculate on scroll direction change */
  .section { position: static; }
  /* Keep position:relative only where children use absolute positioning */
  .hero,
  .section-testi,
  .section-contact,
  .section-promo-ete { position: relative; }

  /* Off-screen sections: skip rendering until near viewport */
  .section-services,
  .section-zone,
  .section-certif,
  .section-trust,
  .section-explain { content-visibility: auto; contain-intrinsic-size: auto 600px; }

  /* certif-card: kill hover effects on mobile */
  .certif-card { box-shadow: none !important; }

  /* card-shine: invisible on touch, remove from rendering entirely */
  .card-shine { display: none; }

  /* contact-info-row: also kill box-shadow */
  .contact-info-row { box-shadow: none; }
}

/* --- Responsive — 600px (phones portrait) --- */
@media (max-width: 600px) {
  /* Typography */
  .hero-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  /* Logo nav size fix (prevents iOS zoom) */
  .logo-plomberie { font-size: 0.65rem; }
  /* Tags font-size — minimum 12px for legibility */
  .tags span { font-size: 0.75rem; }
  .scroll-cue span { font-size: 0.65rem; }

  /* Contact pills — smaller text on small phones to prevent overflow */
  .contact-cta, .contact-email {
    font-size: clamp(1rem, 4.5vw, 1.4rem);
    padding: 14px 14px 14px 20px;
    width: 90vw;
  }
  .contact-cta-icon, .contact-email-icon { width: 36px; height: 36px; }
  .contact-cta-arrow, .contact-email-arrow { width: 32px; height: 32px; }

  /* Grids */
  .services-grid { gap: 14px; }
  .contact-info-row { flex-direction: column; gap: 18px; padding: 24px 20px; }
  .contact-info-sep { width: 40px; height: 1px; }
  .certif-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero actions */
  .hero-actions { flex-direction: column; align-items: center; }

  /* Sections */
  .section-services, .section-zone, .section-contact { padding: 64px 0; }

  .footer-inner { justify-content: center; text-align: center; }
}

/* --- Ultra small phones (iPhone SE, Galaxy A series ≤390px) --- */
@media (max-width: 390px) {
  /* Contact pills -- very small screens */
  .contact-cta, .contact-email {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    padding: 12px 12px 12px 16px;
  }
}

/* Dark mode désactivé — le site reste toujours en mode clair */


/* FAQ local pages */
.faq-item { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); }
.faq-q { font-family: var(--font-d); font-size: 1.1rem; color: var(--text); margin-bottom: 10px; }
.faq-a { font-size: 0.9rem; line-height: 1.7; color: var(--text-m); }

/* Zone chips — toutes les villes cliquables */
.city.city-link {
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
}
.city.city-link:hover {
  color: #fff;
  background: rgba(155,35,53,0.80);
  border-color: rgba(155,35,53,0.6);
  text-decoration: none;
}
.city.city-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 100px;
}

/* Zone chips sur pages locales (fond sombre intégré) */
.section-zone-local {
  background: var(--navy);
  padding: 20px 0;
}
.zone-local-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.zone-local-chips .city { font-size: 0.74rem; }
.section-zone-local .section-title {
  color: #faf8f5;
  color: oklch(0.97 0.004 80);
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.section-zone-local .section-tag {
  color: #d9dce8;
  color: oklch(0.90 0.008 260);
}

/* ── Hero été — 3 lignes, police réduite ── */
.hero-title-ete {
  font-size: clamp(1.8rem, 4.2vw, 3.6rem) !important;
}
@media (max-width: 768px) {
  .hero-title-ete {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }
}

/* ── Promo Été — Hero clim (Kozeo-inspired) ── */
.section-promo-ete {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.promo-bg { position: absolute; inset: 0; }
.promo-bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
.promo-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(26,30,56,0.88) 0%, rgba(26,30,56,0.6) 55%, rgba(26,30,56,0.15) 100%);
}
.promo-container {
  position: relative; z-index: 1;
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(72px, 10vw, 120px);
}
.promo-content { max-width: 560px; }
.promo-tag {
  font-family: var(--font-m); font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-h); margin-bottom: 24px;
}
.promo-headline {
  font-family: var(--font-d);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400; line-height: 1.08;
  color: #faf8f5; margin-bottom: 20px;
}
.promo-sub {
  font-size: 1.05rem; line-height: 1.6;
  color: rgba(250,248,245,0.7); margin-bottom: 28px;
}
.promo-sub strong { color: #faf8f5; font-weight: 600; }
.promo-checks {
  list-style: none; margin-bottom: 32px;
}
.promo-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.92rem; color: rgba(250,248,245,0.85);
  line-height: 2;
}
.promo-checks svg { color: var(--accent-h); flex-shrink: 0; }
.promo-actions {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.btn-promo { font-size: 0.95rem; padding: 14px 26px; }
.promo-or {
  font-size: 0.85rem; color: rgba(250,248,245,0.5);
}
.promo-phone {
  color: #faf8f5; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.promo-legal {
  font-size: 0.68rem; color: rgba(250,248,245,0.25);
  margin-top: 20px; font-style: italic;
}
@media (max-width: 768px) {
  .section-promo-ete { min-height: auto; }
  .promo-bg-img { object-position: left center; }
  .promo-bg-overlay {
    background: linear-gradient(to bottom, rgba(26,30,56,0.9) 0%, rgba(26,30,56,0.7) 60%, rgba(26,30,56,0.3) 100%);
  }
}

/* ── Section confiance — Pourquoi nous ── */
.section-trust {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--bg-raised);
}
.trust-tag {
  font-family: var(--font-m); font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); text-align: center; margin-bottom: 48px;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; text-align: center;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.trust-number {
  font-family: var(--font-d); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400; color: var(--navy); line-height: 1;
}
.trust-number small { font-size: 0.5em; color: var(--text-m); }
.trust-logos {
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.trust-logo {
  width: 64px; height: 64px; object-fit: contain;
}
.trust-label {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
}
.trust-desc {
  font-size: 0.82rem; line-height: 1.5; color: var(--text-m); max-width: 220px;
}
a.trust-item-link {
  text-decoration: none; color: inherit;
  border-radius: 12px; transition: background 0.25s;
  padding: 16px 12px; margin: -16px -12px;
}
a.trust-item-link:hover {
  background: oklch(0.96 0.005 80);
}
a.trust-item-link:hover .trust-label {
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 768px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .trust-item { align-items: center; text-align: center; display: grid; grid-template-rows: 56px auto auto; justify-items: center; gap: 6px; }
  .trust-number { font-size: 2.2rem; align-self: end; }
  .trust-logos { align-self: end; }
  .trust-label { align-self: start; }
  .trust-desc { max-width: none; font-size: 0.78rem; align-self: start; }
}
@media (max-width: 400px) {
  .trust-grid { gap: 24px 10px; }
  .trust-item { grid-template-rows: 48px auto auto; }
  .trust-number { font-size: 1.8rem; }
  .trust-logo { width: 44px; height: 44px; }
  .trust-label { font-size: 0.82rem; }
  .trust-desc { font-size: 0.72rem; }
}

/* ── Section éducative — Comprendre la clim ── */
.section-explain {
  padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 120px);
  background: var(--bg-raised);
}
.explain-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.explain-tag {
  font-family: var(--font-m); font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 16px;
}
.explain-title {
  font-family: var(--font-d); font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400; line-height: 1.2; color: var(--text);
  margin-bottom: 24px;
}
.explain-text p {
  font-size: 0.92rem; line-height: 1.8; color: var(--text-m);
  margin-bottom: 16px;
}
.explain-text strong { color: var(--text); font-weight: 600; }
.explain-visual {
  border-radius: var(--r-xl); overflow: hidden;
}
.explain-visual img {
  width: 100%; height: 100%; object-fit: cover;
}
.explain-grid-reverse { direction: rtl; }
.explain-grid-reverse > * { direction: ltr; }

/* ── Section adoucisseur ── */
.section-adoucisseur {
  padding: clamp(88px, 10vw, 120px) 0 clamp(104px, 12vw, 152px);
  margin-top: -80px;
  background: linear-gradient(180deg,
    oklch(0.22 0.04 260 / 0) 0%,
    oklch(0.22 0.04 260 / 1) 80px
  );
  position: relative;
}
.section-adoucisseur .explain-tag { color: var(--accent-h); }
.section-adoucisseur .explain-title { color: #faf8f5; }
.section-adoucisseur .explain-text p { color: rgba(250,248,245,0.65); }
.section-adoucisseur .explain-text strong { color: #faf8f5; }
@media (max-width: 768px) {
  .explain-grid { grid-template-columns: 1fr; }
  .explain-visual { aspect-ratio: 16/10; }
  .explain-grid-reverse { direction: ltr; }
}