/* ============================================================================
   MSCV SA — Direction C « Confort »  ·  SOFT, CALM, ON-BRAND
   The feeling of a comfortable home — now hard-anchored on the REAL MSCV
   palette: true cyan/blue (lead) + action orange, at soft tints/washes.
   Warm off-white paper, rounded everything, generous air, "breathing" motion.
   Peach is GONE as an identity colour. Blue/cyan clearly leads.
   Grounds structural tokens in ../shared/tokens.css; keeps the soft feel but
   reads unmistakably MSCV.
   ============================================================================ */

/* --- Fraunces (self-hosted) — the soft rounded display voice of this world --- */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/fraunces-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/fraunces-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/fraunces-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/fraunces-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   ON-BRAND SOFT PALETTE — hard-anchored on the real MSCV cyan/blue + orange.
   Kept soft/airy via tints & washes of the TRUE brand hues (no peach world).
   Brand refs (../shared/tokens.css): --mscv-blue #159BD7 · --mscv-cyan #2BB5E8
   · --mscv-blue-deep #1C75BC · --mscv-orange #F7931E · --mscv-orange-text #B25E00
   ============================================================================ */
:root {
  /* Surfaces — warm off-white paper + soft brand-cyan/blue washes */
  --c-cream:        #FAF9F6;   /* warm off-white — primary surface (--paper-50) */
  --c-cream-2:      #FFFFFF;   /* lifted card white */
  /* Neutral/cool wash role (renamed from --c-peach-* — values are cool now, the
     "peach" name was a regression landmine). Cool blue-tinted very-light surfaces
     + clean cool grey. Identity colour is blue/cyan; NO warm hue here. */
  --c-wash-50:      #F2F8FB;   /* faint cool blue-grey wash */
  --c-wash-100:     #E3EEF4;   /* soft cool blue-grey */
  --c-wash-200:     #CFE0EA;   /* deeper cool blue-grey accent */
  /* deep-blue B2B system — the panel colour, promoted to a token so footer/contact
     rail can echo it (dark tone stops reading like a bolted-on island). */
  --c-deep-1:       #143C5A;   /* deep-blue panel top */
  --c-deep-2:       #0F2E45;   /* deep-blue panel bottom */
  /* Blue/cyan washes — the LEAD identity, soft but unmistakably brand */
  --c-powder-50:    #E9F6FC;   /* faintest cyan wash */
  --c-powder-100:   #C7E9F7;   /* soft brand cyan */
  --c-powder-200:   #9BD5EF;   /* deeper brand cyan */
  --c-cyan-soft:    #7DC7EC;   /* decorative brand cyan (renamed from --c-coral) */

  /* Brand hues (mirrored from tokens for direct use) */
  --c-blue:         #159BD7;   /* --mscv-blue */
  --c-cyan:         #2BB5E8;   /* --mscv-cyan */

  /* Ink — warm deep near-black, calm not corporate; AA on cream/washes */
  --c-ink:          #1F2A30;   /* body + headings (AA ≥ 13:1 on cream) */
  --c-ink-soft:     #3F5058;   /* secondary text (AA ≥ 7:1 on cream) */
  --c-ink-muted:    #5C6B72;   /* captions / meta (AA ≥ 4.8:1 on cream) */

  /* ACTION — real MSCV red #C42727 (the original's only action colour).
     Used for the emergency 24/24 call CTA. White text on it ≈ 5.0:1 (AA). */
  --c-red:          #C42727;   /* --mscv action red — emergency CTA fill */
  --c-red-deep:     #A81F1F;   /* hover / deeper fill (white text ~6.2:1) */
  --c-red-text:     #B22121;   /* red as text/link on cream — AA ≥4.5 */
  /* Orange retained ONLY as the temperature-signature accent (hero glow, heat
     icons, urgence link text) — never a solid CTA fill. Dark orange text on cream. */
  --c-orange:       #F7931E;   /* --mscv-orange — signature/heat accent fill */
  --c-orange-deep:  #E5851A;   /* deeper accent */
  --c-orange-ink:   #3A2205;   /* text ON orange fill — deep, AA ~8:1 */
  --c-orange-text:  #B25E00;   /* --mscv-orange-text — AA ≥4.5 on cream */

  /* Brand blue as calm actions/text — cyan-tint fill (ink text) + deep text/border */
  --c-blue-action:  #7FCBEA;   /* soft brand-cyan button fill (ink text AA ~5.8:1) */
  --c-blue-fill:    #1C75BC;   /* --mscv-blue-deep — solid fill WITH WHITE (~4.6:1) */
  --c-blue-deep:    #17618F;   /* brand blue as text/border on cream — AA ≥5:1 */

  --c-hairline:     #DCE6EC;   /* soft cool hairline */
  --c-hairline-2:   rgba(31,42,48,0.10);

  /* local spacing (tokens.css only ships 1-4,6,8...) */
  --space-5: 1.25rem;
  --space-10: 2.5rem;

  /* Radii — calmer, more architectural. Softness stays (nothing is sharp) but the
     "app-bubble" over-rounding is dialled back for premium restraint. Big radii
     reserved for hero + feature moments only. */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 30px;
  --r-pill: 999px;

  /* Soft, cool-tinted shadows — diffuse, never harsh */
  --sh-sm: 0 2px 10px rgba(28,117,188,0.07);
  --sh-md: 0 10px 30px rgba(28,117,188,0.10), 0 2px 8px rgba(28,117,188,0.05);
  --sh-lg: 0 24px 60px rgba(28,117,188,0.15), 0 6px 16px rgba(28,117,188,0.06);
  --sh-orange: 0 10px 26px rgba(247,147,30,0.28);
  --sh-red:    0 10px 26px rgba(196,39,39,0.26);   /* emergency CTA lift */

  /* soft image grade — calm, true colour (no peach sepia cast) */
  --warm-grade: saturate(1.0) brightness(1.03) contrast(0.98);
  --scrim-soft: linear-gradient(0deg, rgba(23,32,38,0.64) 0%, rgba(23,32,38,0.06) 55%, transparent 100%);
}

/* --- Reset / base ---------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--c-ink);
  background: var(--c-cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: 'Fraunces', var(--font-body); color: var(--c-ink);
  line-height: 1.12; font-weight: 600; letter-spacing: -0.01em;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.mono { font-family: var(--font-mono); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--c-ink); color: var(--c-cream); padding: .6rem 1rem; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* focus visibility everywhere — soft ink ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: var(--r-sm);
}

/* --- Eyebrows / section heads ----------------------------------------------
   Editorial restraint: mono, uppercased, tracked-out label — reads technical +
   premium, not consumer-cute. Replaces the soft lowercase pill eyebrow. */
.eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--c-blue-deep); margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--c-cyan); margin-right: .7rem;
}
.sec-head { max-width: 62ch; margin-bottom: var(--space-12); }
.sec-title {
  font-family: 'Fraunces', var(--font-body); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.05rem); letter-spacing: -0.02em; line-height: 1.06;
}
.sec-sub { font-size: var(--text-lg); color: var(--c-ink-soft); margin-top: var(--space-5); max-width: 58ch; line-height: 1.55; }
.star { color: var(--c-orange-text); }

/* --- Links -------------------------------------------------------------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: .35em; font-weight: 600; font-size: var(--text-sm);
  color: var(--c-blue-deep); text-decoration: none; min-height: 44px;
}
.link-arrow:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }
.link-urg {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: var(--text-sm); color: var(--c-red-text); text-decoration: none;
}
.link-urg:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================ BUTTONS ============================ */
.btn {
  --btn-h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--btn-h); padding: 0 1.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.1;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.btn .ico { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn-sm { --btn-h: 44px; font-size: var(--text-sm); padding: 0 1.1rem; }
.btn-lg { --btn-h: 56px; padding: 0 1.8rem; font-size: 1.0625rem; }

/* Emergency action — real MSCV RED, WHITE text (~5.0:1 AA). Class name kept
   (.btn-orange) so HTML is untouched; the ACTION colour is now the brand red. */
.btn-orange { background: var(--c-red); color: #fff; box-shadow: var(--sh-red); }
.btn-orange:hover { background: var(--c-red-deep); transform: translateY(-1px); }
.btn-orange:active { transform: translateY(0); }
.btn-orange:focus-visible { outline-color: var(--c-red-deep); }

/* Blue — solid brand blue-deep fill with WHITE text (~4.6:1), calm secondary action */
.btn-blue { background: var(--c-blue-fill); color: #fff; box-shadow: var(--shadow-brand); }
.btn-blue:hover { background: var(--c-blue-deep); transform: translateY(-1px); }
.btn-blue:active { transform: translateY(0); }
.btn-blue:focus-visible { outline-color: var(--c-blue-deep); }

.btn-blue-outline { background: var(--c-cream-2); border-color: var(--c-blue-deep); color: var(--c-blue-deep); }
.btn-blue-outline:hover { background: var(--c-powder-50); color: var(--c-ink); border-color: var(--c-blue-deep); transform: translateY(-1px); }
.btn-blue-outline:active { transform: translateY(0); }

.sec-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }

/* chips */
.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: .4rem .9rem;
  background: var(--c-cream-2); color: var(--c-ink-soft); font-size: var(--text-xs);
  border-radius: var(--r-pill); box-shadow: var(--sh-sm); border: 1px solid var(--c-hairline);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ============================ NAV ============================ */
.nav-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 90; padding: var(--space-4) var(--space-6) 0; overflow-x: clip; }
.nav-pill {
  width: 100%; max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-6);
  background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-pill); box-shadow: var(--sh-md); border: 1px solid rgba(255,255,255,0.6);
  padding: .55rem .8rem .55rem 1.2rem;
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav-wrap.scrolled .nav-pill { background: rgba(255,255,255,0.96); box-shadow: var(--sh-lg); }
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { list-style: none; display: flex; gap: var(--space-6); margin-inline: auto; }
.nav-links a {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--c-ink);
  text-decoration: none; padding: .4rem 0; position: relative; min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; background: var(--c-cyan); border-radius: 2px; transition: width var(--dur-base) var(--ease-out); }
.nav-links a:hover { color: var(--c-blue-deep); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.nav-burger { display: none; flex: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.nav-burger span { width: 22px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.nav-regies-link {
  display: block; text-align: right; max-width: var(--container); margin: .5rem auto 0;
  width: 100%; padding-right: 1.2rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); color: var(--c-blue-deep); text-decoration: none;
}
.nav-regies-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(23,32,38,0.42); z-index: 95; }
.drawer {
  position: fixed; top: 0; right: 0; left: 0; z-index: 96; background: var(--c-cream-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 5rem var(--space-6) var(--space-8);
  box-shadow: var(--sh-lg);
}
.drawer-links { list-style: none; }
.drawer-links a { display: flex; align-items: center; min-height: 50px; font-family: 'Fraunces', var(--font-body); font-size: var(--text-lg); color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-hairline); }
.drawer-regies { color: var(--c-blue-deep) !important; font-weight: 500; }
.drawer-cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.drawer-cta .btn { width: 100%; }

/* sticky desktop mini header */
.sticky-desktop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: rgba(255,255,255,0.97);
  box-shadow: var(--sh-sm); border-bottom: 1px solid var(--c-hairline); backdrop-filter: blur(10px);
  transform: translateY(-100%); transition: transform var(--dur-base) var(--ease-out);
}
.sticky-desktop.show { transform: translateY(0); }
.sticky-inner { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .55rem var(--space-6); }
.sticky-info { font-size: var(--text-xs); color: var(--c-ink-muted); letter-spacing: .04em; }
.sticky-actions { display: flex; align-items: center; gap: var(--space-4); }
.sticky-urg { font-weight: 700; font-size: var(--text-sm); color: var(--c-red-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.sticky-urg:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================ HERO ============================ */
/* Soft dawn-warmth gradient panel with a big rounded headline + lots of air,
   then a soft rounded full-width comfort image band below. Not a van card. */
.hero { position: relative; padding-top: 9.5rem; padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-dawn {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  /* reduced to 2 stops: cyan bloom (lead) + a faint warm temperature glow */
  background:
    radial-gradient(80% 66% at 14% 10%, rgba(43,181,232,0.30) 0%, rgba(43,181,232,0) 62%),
    radial-gradient(110% 85% at 88% 108%, rgba(247,147,30,0.13) 0%, rgba(247,147,30,0) 66%);
}
/* Asymmetric hero — copy left, composed media cluster right (was empty). */
.hero-grid {
  position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 52ch; }
.hero .eyebrow { justify-content: flex-start; }
.hero-h1 {
  font-family: 'Fraunces', var(--font-body); font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.025em;
  line-height: 1.02; margin: var(--space-2) 0 var(--space-5); max-width: 15ch;
}
.hero-answer { display: block; color: var(--c-blue-deep); font-weight: 600; margin-top: .1em; }
.hero-sub { font-size: var(--text-lg); color: var(--c-ink-soft); max-width: 46ch; line-height: 1.55; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-6); margin-top: var(--space-8); }
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cta-note { font-size: var(--text-sm); color: var(--c-ink-muted); max-width: 34ch; }

/* Hero trust row — Google review chip leads, credible + restrained */
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: .55rem .9rem; margin-top: var(--space-8);
  font-weight: 500; font-size: var(--text-sm); color: var(--c-ink-soft);
}
.trust-google {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .5rem .95rem; background: var(--c-cream-2); border: 1px solid var(--c-hairline);
  border-radius: var(--r-pill); box-shadow: var(--sh-sm); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.trust-google:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.google-g { width: 1.15em; height: 1.15em; flex: none; font-size: 1rem; }
.trust-rating { font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: 1.1rem; color: var(--c-ink); line-height: 1; }
.trust-stars { color: var(--c-orange); letter-spacing: -1px; font-size: .95rem; }
.trust-label { color: var(--c-ink-soft); font-size: var(--text-sm); }
.trust-sep { width: 1px; height: 24px; background: var(--c-hairline); }
.trust-fact { color: var(--c-ink-soft); }
.trust-dot { color: var(--c-powder-200); }

/* Composed hero media cluster — the branded van at a prestige address, framed
   as a designed unit: a soft temperature-gradient rail behind (cyan→blue→orange,
   the subtle orange presence for C-1), a hexagon brand chip, and a floating
   credential badge. Fills the right column; no bare image, no dead space. */
.hero-media { position: relative; z-index: 1; }
.hero-media-stack { position: relative; padding: 14px 18px 22px 0; }
/* soft temperature rail — the signature warm→cool spectrum, whisper-quiet, sits
   behind the photo top-right so orange finally breathes into the hero (C-1). */
.hero-temp-rail {
  position: absolute; z-index: 0; top: -10px; right: -2px; width: 62%; height: 60%;
  border-radius: var(--r-2xl);
  background: linear-gradient(140deg, rgba(43,181,232,0.20) 0%, rgba(28,117,188,0.16) 48%, rgba(247,147,30,0.24) 100%);
  filter: blur(2px); pointer-events: none;
}
.hero-img {
  position: relative; z-index: 1; border-radius: var(--r-2xl); overflow: hidden;
  box-shadow: var(--sh-lg); border: 1px solid var(--c-hairline);
}
.hero-img img {
  width: 100%; height: clamp(360px, 42vw, 500px); object-fit: cover; object-position: center 60%;
  filter: var(--warm-grade);
}
.img-chip {
  position: absolute; left: var(--space-5); bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.05rem;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--r-pill); box-shadow: var(--sh-md);
  font-size: var(--text-xs); color: var(--c-ink); font-weight: 500;
}
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-red); flex: none; }
/* hexagon brand motif — precision mark, gradient-stroked (cyan→blue→orange) */
.hero-hex {
  position: absolute; z-index: 2; top: -2px; right: -4px;
  width: 72px; height: 72px; display: grid; place-items: center;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
/* floating credential badge — soft white card, deep-blue number, warm hairline top */
.hero-badge {
  position: absolute; z-index: 2; right: -4px; bottom: 42px;
  display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem;
  background: var(--c-cream-2); border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  border-top: 3px solid var(--c-orange);
}
.hero-badge-num {
  font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: 2rem;
  line-height: 1; color: var(--c-blue-deep);
}
.hero-badge-lbl { font-size: var(--text-xs); color: var(--c-ink-soft); line-height: 1.25; }

/* ======================= BANDE URGENCE ======================= */
.section-urgence { padding-block: var(--space-8); }
.urgence-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
  background: linear-gradient(120deg, var(--c-wash-50) 0%, var(--c-wash-100) 100%);
  border-radius: var(--r-xl); box-shadow: var(--sh-sm); border: 1px solid var(--c-wash-100);
  padding: var(--space-8) var(--space-12);
}
.urgence-text { flex: 1 1 480px; }
.urgence-text p { font-size: var(--text-lg); color: var(--c-ink); }
.urgence-text a { color: var(--c-red-text); font-weight: 700; }
.urgence-btn { flex: none; }

/* ============================================================================
   C-4 · SUBTLE PREMIUM BACKGROUND SYSTEM
   Whisper-quiet section treatments that lift C from "clean" to "considered":
   a faint hexagon motif (brand precision mark) + gentle temperature washes.
   All extremely low-opacity, behind content, aria-hidden; never touch AA
   (text always sits on solid paper/white, not on these fields).
   ============================================================================ */
.triptych, .services, .temoignage, .contact { position: relative; overflow: hidden; }
.triptych > .container, .services > .container,
.temoignage > .container, .contact > .container { position: relative; z-index: 1; }
/* faint hexagon watermark — a single large brand hex, barely-there */
.bg-hex {
  position: absolute; z-index: 0; pointer-events: none; opacity: .5;
  width: clamp(260px, 34vw, 460px); height: auto;
}
.bg-hex svg { width: 100%; height: auto; display: block; }
.triptych .bg-hex { top: -60px; right: -90px; transform: rotate(6deg); }
.services  .bg-hex { bottom: -120px; left: -110px; transform: rotate(-8deg); }
/* soft temperature wash fields (radial, single soft blob per section) */
.services  { background: radial-gradient(90% 60% at 88% 4%, rgba(43,181,232,0.07) 0%, rgba(43,181,232,0) 60%); }
.contact   { background: radial-gradient(80% 60% at 8% 0%, rgba(247,147,30,0.06) 0%, rgba(247,147,30,0) 58%); }

/* ==================== WELLBEING TRIPTYCH (signature) ==================== */
.triptych .sec-head { max-width: 62ch; margin-inline: auto; text-align: center; }
.triptych .eyebrow { justify-content: center; }

/* Temperature spectrum legend — makes the warm→cool system explicit + intentional.
   One continuous cyan→blue→orange bar (read right-to-left as air→eau→chaud), with
   three labels aligned over the three panels below. This is the ONE place the full
   temperature gradient shows, as a tasteful signature (never wallpaper). */
.tri-spectrum {
  position: relative; max-width: 640px; margin: 0 auto var(--space-8);
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
}
.tri-spectrum-bar {
  grid-column: 1 / -1; grid-row: 1; height: 6px; border-radius: var(--r-pill);
  /* orange (chaud) left → blue → cyan (air) right, matching panel order */
  background: linear-gradient(90deg, var(--c-orange) 0%, var(--c-blue-fill) 52%, var(--c-cyan) 100%);
  opacity: .9;
}
.tri-spectrum-lbl {
  grid-row: 1; align-self: center; justify-self: center; z-index: 1;
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-ink-soft); background: var(--c-cream); padding: .15rem .6rem; border-radius: var(--r-pill);
  box-shadow: var(--sh-sm); border: 1px solid var(--c-hairline);
}

.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.tri-panel {
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md);
  background: var(--c-cream-2); border: 1px solid var(--c-hairline);
  display: flex; flex-direction: column; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.tri-panel:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.tri-img { overflow: hidden; }
.tri-img img { width: 100%; height: 210px; object-fit: cover; filter: var(--warm-grade); }
/* Coherent temperature system across all 3: each body carries a gradient accent
   bar (its position on the warm→cool spectrum), a matching temperature label, and
   a whisper-faint tinted wash from the top. Text always sits on the solid-white
   lower body — AA safe. No lonely single-orange card: all 3 share the same system. */
.tri-body {
  position: relative; padding: var(--space-8); flex: 1;
  display: flex; flex-direction: column; gap: var(--space-3);
  border-top: 4px solid var(--c-hairline);
}
.tri-warm  .tri-body { border-top-color: var(--c-orange); background: linear-gradient(180deg, rgba(247,147,30,0.07) 0%, rgba(247,147,30,0) 34%); }
.tri-mid   .tri-body { border-top-color: var(--c-blue-fill); background: linear-gradient(180deg, rgba(28,117,188,0.07) 0%, rgba(28,117,188,0) 34%); }
.tri-cool  .tri-body { border-top-color: var(--c-cyan); background: linear-gradient(180deg, rgba(43,181,232,0.08) 0%, rgba(43,181,232,0) 34%); }
/* per-panel temperature label — consistent placement = deliberate system */
.tri-temp {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-ink-muted);
}
.tri-temp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tri-warm .tri-temp-dot { background: var(--c-orange); }
.tri-mid  .tri-temp-dot { background: var(--c-blue-fill); }
.tri-cool .tri-temp-dot { background: var(--c-cyan); }
.tri-word { font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: 2.1rem; line-height: 1; }
.word-warm { color: var(--c-orange-text); }       /* AA ≥4.5 on white */
.word-blue-deep { color: var(--c-blue-deep); }     /* AA ≥5:1 on white */
.word-blue { color: var(--c-blue-deep); }
.tri-body p { color: var(--c-ink-soft); }          /* AA ≥8:1 on white */
.tri-body .link-arrow { margin-top: auto; color: var(--c-blue-deep); }

/* ====================== ENGAGEMENTS ====================== */
.eng-grid { display: grid; grid-template-columns: 40% 1fr; gap: var(--space-16); align-items: start; }
.eng-side { position: sticky; top: 6rem; }
.eng-reassure { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.eng-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.eng-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.eng-row {
  display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-8);
  background: var(--c-cream-2); border-radius: var(--r-lg); box-shadow: var(--sh-sm); border: 1px solid var(--c-hairline);
}
.eng-lead { padding: var(--space-12) var(--space-8); background: linear-gradient(150deg, var(--c-wash-50), var(--c-cream-2)); box-shadow: var(--sh-md); }
.eng-num {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-wash-100); color: var(--c-blue-deep);
  font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: center;
}
.eng-row h3 { font-size: var(--text-xl); margin-bottom: .3em; }
.eng-row p { color: var(--c-ink-soft); }

/* ======================== SERVICES ======================== */
.svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
.svc-card {
  grid-column: span 2; background: var(--c-cream-2); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--c-hairline);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.svc-big { grid-column: span 3; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.svc-img { overflow: hidden; }
.svc-img img { width: 100%; height: 220px; object-fit: cover; filter: var(--warm-grade); transition: transform 1.2s var(--ease-out); }
.svc-card:hover .svc-img img { transform: scale(1.04); }
.svc-body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.svc-body h3 { font-size: var(--text-xl); }
.svc-sub { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-blue-deep); margin-top: -.35rem; }
.svc-benefit { color: var(--c-ink-soft); }
.svc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc-chips li { font-size: var(--text-xs); color: var(--c-ink-soft); background: var(--c-powder-50); border: 1px solid var(--c-hairline); border-radius: var(--r-pill); padding: .35rem .8rem; }
.svc-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; padding-top: var(--space-2); }

/* ====================== RÉALISATIONS ====================== */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: var(--space-4); }
.tile { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: var(--warm-grade); transition: transform 1.2s var(--ease-out); }
.tile:hover img { transform: scale(1.05); }
.tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 1.1rem 1rem;
  background: var(--scrim-soft); color: #fff; display: flex; flex-direction: column; gap: .15rem;
}
.tile figcaption .mono { font-size: var(--text-xs); opacity: .92; }
.cap-line { font-weight: 500; font-size: var(--text-sm); }

/* ================= POURQUOI / TRUST + STATS ================= */
.pourquoi { background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-powder-50) 100%); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.why-p { font-size: var(--text-lg); color: var(--c-ink-soft); max-width: 60ch; margin-top: var(--space-4); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
.value { background: var(--c-cream-2); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: var(--space-6); border: 1px solid var(--c-hairline); }
.value h3 { font-size: var(--text-lg); color: var(--c-blue-deep); margin-bottom: .2em; }
.value p { font-size: var(--text-sm); color: var(--c-ink-soft); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.stat { background: var(--c-cream-2); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--space-8) var(--space-6); border: 1px solid var(--c-hairline); }
.stat-num { display: block; font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: 2.6rem; color: var(--c-ink); line-height: 1; }
.stat-rating { color: var(--c-orange-text); }
.stat-lbl { display: block; font-size: var(--text-sm); color: var(--c-ink-soft); margin-top: .5em; }
.garanties { list-style: none; margin-top: var(--space-8); display: grid; gap: var(--space-3); }
.garanties li { position: relative; padding-left: 2rem; color: var(--c-ink); }
.garanties li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 1.4rem; height: 1.4rem;
  color: var(--c-blue-deep); background: var(--c-wash-200); border-radius: 50%; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.founders { display: flex; gap: var(--space-6); align-items: center; margin-top: var(--space-8); padding: var(--space-6); background: var(--c-powder-50); border-radius: var(--r-lg); border: 1px solid var(--c-hairline); }
.founders-img { flex: none; width: 160px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
.founders-img img { width: 160px; height: 130px; object-fit: cover; filter: var(--warm-grade); }
.founders-kicker { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-blue-deep); margin-bottom: .35rem; }
.founders-body p { font-size: var(--text-base); color: var(--c-ink-soft); }
.founders-body .link-arrow { margin-top: var(--space-3); }

/* ======================= TÉMOIGNAGES — real Google review set ======================= */
.temoignage { background: linear-gradient(180deg, var(--c-powder-50) 0%, var(--c-cream) 100%); }
.temo-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-12);
}
.temo-head .eyebrow { justify-content: flex-start; }
.temo-rating { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.google-attr { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .9rem; background: var(--c-cream-2); border: 1px solid var(--c-hairline); border-radius: var(--r-pill); box-shadow: var(--sh-sm); }
.google-attr .google-g { width: 1.25em; height: 1.25em; font-size: 1rem; flex: none; }
.temo-badge-txt { display: flex; flex-direction: column; line-height: 1.15; }
.temo-badge-txt b { color: var(--c-ink); font-weight: 600; font-size: var(--text-sm); }
.temo-badge-score { font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: 1.15rem; color: var(--c-ink); display: inline-flex; align-items: baseline; gap: .25rem; }
.temo-badge-score .star { color: var(--c-orange); font-size: .85em; }
.temo-badge-of { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--c-ink-muted); }
.temo-recap { font-size: var(--text-xs); color: var(--c-ink-muted); letter-spacing: .04em; }

.stars { color: var(--c-orange); letter-spacing: 1px; font-size: .95rem; }

/* Featured + grid layout: featured card spans a wide column on desktop */
.temo-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: start; }
.temo-feature {
  position: relative; background: var(--c-cream-2); border-radius: var(--r-2xl); box-shadow: var(--sh-md);
  border: 1px solid var(--c-hairline); padding: var(--space-12) var(--space-10) var(--space-8);
  border-top: 4px solid var(--c-cyan); overflow: hidden; align-self: start;
  display: flex; flex-direction: column;
}
.quote-mark {
  position: absolute; top: -.02em; left: .22em; font-family: 'Fraunces', var(--font-body);
  font-size: 9rem; line-height: 1; color: var(--c-powder-200); opacity: .5; pointer-events: none;
}
.temo-feature-quote {
  position: relative; font-family: 'Fraunces', var(--font-body); font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--c-ink); margin-top: var(--space-3);
}
.temo-attr { display: inline-flex; align-items: center; gap: .7rem; margin-top: var(--space-6); }
.temo-feature .temo-attr { margin-top: var(--space-6); padding-top: var(--space-2); }
.temo-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: 'Fraunces', var(--font-body); font-weight: 600;
  font-size: var(--text-sm); color: #fff; background: linear-gradient(150deg, var(--c-cyan), var(--c-blue-fill));
}
.temo-who { display: flex; flex-direction: column; line-height: 1.25; }
.temo-name { font-weight: 600; color: var(--c-ink); font-size: var(--text-sm); }
.temo-meta { font-size: var(--text-xs); color: var(--c-ink-muted); display: inline-flex; align-items: center; gap: .35rem; }
.temo-meta .stars { font-size: .75rem; }

.temo-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); align-content: start; }
.temo-card {
  background: var(--c-cream-2); border: 1px solid var(--c-hairline); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.temo-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.temo-text { color: var(--c-ink-soft); font-size: var(--text-sm); line-height: 1.5; }
.temo-card .temo-attr { margin-top: auto; }
.temo-card .temo-avatar { width: 34px; height: 34px; font-size: var(--text-xs); }
.temo-cta { margin-top: var(--space-12); text-align: center; }

/* ==================== B2B — PARTENAIRE PREMIUM ====================
   The elevated partner section. On-dark deep-blue panel for gravitas +
   contrast against the airy light page — signals "premium business partner"
   without abandoning the calm. Cool washes, generous air, editorial numbering. */
/* FULL-BLEED deep-blue panel — committed into a system (not an island). No
   margin-inline, no card radius: it spans the viewport edge-to-edge so it reads
   as an intentional B2B chapter. The same deep-blue is echoed in the footer. */
.b2b {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(43,181,232,0.16) 0%, rgba(43,181,232,0) 55%),
    radial-gradient(100% 80% at 10% 100%, rgba(247,147,30,0.10) 0%, rgba(247,147,30,0) 60%),
    linear-gradient(165deg, var(--c-deep-1) 0%, var(--c-deep-2) 100%);
  color: #E8F1F7;
}
/* Space Grotesk for the B2B headings — a technical, premium-B2B display voice
   distinct from the airy Fraunces of the B2C page above. */
.b2b-title, .b2b-value h3, .b2b-cta-copy h3 {
  font-family: 'Space Grotesk', var(--font-body); letter-spacing: -0.02em;
}
.b2b-head { max-width: 66ch; margin-bottom: var(--space-16); }
.b2b-eyebrow { color: #7FCBEA; }
.b2b-eyebrow::before { background: #2BB5E8; }
.b2b-title { color: #FFFFFF; max-width: 20ch; }
.b2b-lede { margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.6; color: #C6DAE7; max-width: 62ch; }

.b2b-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-lg); overflow: hidden; }
.b2b-value {
  background: rgba(255,255,255,0.015); padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: background-color var(--dur-base) var(--ease-out);
}
.b2b-value:hover { background: rgba(43,181,232,0.08); }
.b2b-vnum { font-size: var(--text-sm); color: #ACCBE0; letter-spacing: .1em; }  /* ≈8:1 on panel (was #8FB3CC) */
.b2b-value h3 { font-weight: 600; font-size: var(--text-xl); color: #FFFFFF; }
.b2b-value p { color: #B4CBDA; font-size: var(--text-base); line-height: 1.55; }

.b2b-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8);
  margin-top: var(--space-12); padding: var(--space-12); border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(43,181,232,0.14), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
}
.b2b-cta-copy h3 { font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: var(--text-2xl); color: #FFFFFF; letter-spacing: -0.015em; }
.b2b-cta-copy p { margin-top: var(--space-2); color: #C6DAE7; }
.b2b-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Outline button reads on the dark panel */
.b2b .btn-blue-outline { background: transparent; border-color: rgba(255,255,255,0.45); color: #FFFFFF; }
.b2b .btn-blue-outline:hover { background: rgba(255,255,255,0.08); border-color: #FFFFFF; color: #FFFFFF; }

/* ========================= ZONES + MAP ========================= */
.zones-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-16); align-items: center; }
.zones-p { color: var(--c-ink-soft); margin-top: var(--space-4); max-width: 52ch; }
.zones-note { color: var(--c-ink-muted); }

.zones-map { position: relative; }
.sam-frame {
  background: linear-gradient(165deg, var(--c-cream-2) 0%, var(--c-powder-50) 100%);
  border-radius: var(--r-2xl); box-shadow: var(--sh-md); border: 1px solid var(--c-hairline);
  padding: clamp(1rem, 3vw, 2rem);
}
/* Map themed light/calm for direction C */
.sam-map {
  width: 100%; height: auto; display: block;
  --sam-field: #E9F6FC;
  --sam-field-line: rgba(21,155,215,0.26);
  --sam-accent: #159BD7;
  --sam-hq: #C42727;
  --sam-reach: #8FB6CC;
  --sam-label: #2D3E46;
  --sam-label-hq: var(--sam-hq);
  --sam-surface: #FFFFFF;
  --sam-grad-cool: #2BB5E8;
  --sam-grad-mid: #1C75BC;
  --sam-grad-warm: #F7931E;
}
/* Label halos — white stroke painted UNDER the fill so labels stay legible over
   connectors/pins even in the dense center cluster (CC-1). */
.sam-label {
  paint-order: stroke fill;
  stroke: var(--sam-surface); stroke-width: 3.4px; stroke-linejoin: round;
}
.sam-label--hq { stroke-width: 4px; }
.sam-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-6);
  justify-content: center; font-size: var(--text-sm); color: var(--c-ink-soft);
}
.sam-key { display: inline-flex; align-items: center; gap: .5rem; }
.sam-key-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sam-key-hq { background: var(--c-red); }
.sam-key-served { background: var(--c-blue); }
.sam-key-reach { background: #8FB6CC; }

/* Commune pills — the mobile fallback for the SVG map (hidden on desktop).
   HQ pill first, then served communes, then extended-reach. */
.zones-pills { display: none; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.zone-pill {
  display: inline-flex; align-items: center; min-height: 34px; padding: .4rem .9rem;
  font-size: var(--text-sm); color: var(--c-ink); background: var(--c-cream-2);
  border: 1px solid var(--c-hairline); border-radius: var(--r-pill); box-shadow: var(--sh-sm);
}
.zone-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue); margin-right: .5rem; flex: none; }
.zone-pill--hq { font-weight: 700; }
.zone-pill--hq::before { background: var(--c-red); }
.zone-pill--reach::before { background: #8FB6CC; }

/* ===================== CONTACT / CONVERSION ===================== */
.contact-grid { display: grid; grid-template-columns: 40% 1fr; gap: var(--space-16); align-items: start; }
.nap-name { font-family: 'Fraunces', var(--font-body); font-weight: 600; font-size: var(--text-xl); color: var(--c-ink); }
.nap-addr { margin-top: var(--space-2); color: var(--c-ink-soft); }
.nap-list { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.nap-list div { display: flex; flex-direction: column; }
.nap-list dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-muted); }
.nap-list dd { font-weight: 500; color: var(--c-ink); }
.nap-list a { color: var(--c-blue-deep); text-decoration: none; font-weight: 600; }
.nap-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hours { margin-top: var(--space-6); color: var(--c-ink-soft); }
.hours-t { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-muted); margin-bottom: .4em; }
.hours-urg { color: var(--c-orange-text); font-weight: 700; margin-top: .5em; }
.socials { margin-top: var(--space-6); color: var(--c-ink-soft); }
.socials a { color: var(--c-blue-deep); text-decoration: none; font-weight: 600; }
.socials a:hover { text-decoration: underline; text-underline-offset: 3px; }

.form-wrap { background: var(--c-cream-2); border-radius: var(--r-2xl); box-shadow: var(--sh-md); padding: var(--space-8); border: 1px solid var(--c-hairline); }
.form-intro { color: var(--c-ink-soft); margin-bottom: var(--space-6); }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--c-ink); }
.field .opt { color: var(--c-ink-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .65rem .95rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--c-ink);
  background: var(--c-cream); border: 1px solid var(--c-hairline); border-radius: var(--r-md);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-powder-200); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-blue-deep); box-shadow: 0 0 0 3px rgba(43,181,232,0.32); }
.field input[aria-invalid="true"] { border: 1.5px solid #B85C3C; }
.form-submit { grid-column: 1 / -1; justify-self: start; }
.form-success { grid-column: 1 / -1; background: var(--c-powder-50); color: var(--c-ink); padding: var(--space-4); border-radius: var(--r-md); border: 1px solid var(--c-hairline); }
.form-success a { color: var(--c-red-text); font-weight: 700; }

/* footer urgence band — soft cool blue-grey wash, ink text (AA), red action link */
.footer-urgence { background: linear-gradient(120deg, var(--c-wash-100), var(--c-wash-200)); }
.footer-urgence p { color: var(--c-ink); font-weight: 600; text-align: center; padding: var(--space-6) 0; font-size: var(--text-lg); }
.footer-urgence a { color: var(--c-red-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ========================== FOOTER ========================== */
/* Deep-blue footer — echoes the B2B panel a second time so the dark tone reads as
   an intentional system anchor, not a one-off island. Cool-light text (AA on deep-blue). */
.site-footer { background: linear-gradient(165deg, var(--c-deep-1) 0%, var(--c-deep-2) 100%); color: #C6DAE7; padding-block: var(--space-16); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
.footer-brand img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer-tag { font-family: 'Fraunces', var(--font-body); font-style: italic; color: #B4CBDA; margin-top: var(--space-3); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-nav a { color: #C6DAE7; text-decoration: none; font-size: var(--text-sm); min-height: 44px; display: inline-flex; align-items: center; }
.footer-nav a:hover { color: #fff; }
.footer-copy { grid-column: 1 / -1; color: #9EB8C9; font-size: var(--text-sm); border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-6); }

/* ==================== STICKY MOBILE BAR ==================== */
.sticky-mobile {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  gap: var(--space-2); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(28,117,188,0.16);
  border-top: 1px solid var(--c-hairline);
}
.sm-btn { flex: 1; height: 56px; min-height: 56px; }

/* ============================================================================
   MOTION — reveals default VISIBLE (static fallback). JS pre-hides them only
   when motion is allowed AND JS runs (html.js-motion), then GSAP reveals them.
   Gentle "breathing" — soft, slow, calm.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal { opacity: 0; }
  .breathe { animation: breathe 9s ease-in-out infinite alternate; }
  .pulse-dot { animation: pulse 2.6s ease-in-out infinite; }
  .hero-dawn { animation: bloom 1600ms var(--ease-out) both, drift 26s ease-in-out infinite alternate; }
  .sam-pulse { transform-origin: 0 -11px; animation: hqPulse 3s ease-in-out infinite; }

  /* Map pins staggered-in when the map scrolls into view (JS adds .sam-in) */
  .zones-map .sam-pin, .zones-map .sam-hq { opacity: 0; }
  .zones-map.sam-in .sam-pin { animation: pinDrop .5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms); }
  .zones-map.sam-in .sam-hq { animation: pinDrop .55s var(--ease-out) .1s forwards; }

  /* Connector draw-in — soft designed reveal, solid connectors trace out from
     Matran. Each solid path carries pathLength="1" (HTML attr) so one dash rule
     fits every curve. Dashed reach connectors just fade (keep their dotted look). */
  .zones-map .sam-links .sam-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .zones-map.sam-in .sam-links .sam-link { animation: linkDraw 1.1s var(--ease-out) .15s forwards; }
  .zones-map .sam-links-glow, .zones-map .sam-links-reach { opacity: 0; }
  .zones-map.sam-in .sam-links-glow { animation: fadeIn .8s var(--ease-out) .4s forwards; }
  .zones-map.sam-in .sam-links-reach { animation: fadeInReach 1s var(--ease-out) .6s forwards; }
}
@keyframes linkDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: .14; } }
@keyframes fadeInReach { from { opacity: 0; } to { opacity: .7; } }
@keyframes breathe { from { transform: scale(1.0); } to { transform: scale(1.035); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .5; } }
@keyframes bloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2%,1.5%,0) scale(1.05); } }
@keyframes hqPulse { 0%,100% { transform: scale(1); opacity: .16; } 50% { transform: scale(1.8); opacity: .04; } }
/* pins translate via their group transform (already set on <g>), so animate opacity only
   to avoid clobbering the translate(x,y). A soft settle via translateY on the <use>. */
@keyframes pinDrop { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1024px) {
  /* Hero stacks: copy first, composed media below — still a designed cluster. */
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-copy { max-width: 60ch; }
  .hero-media-stack { max-width: 640px; margin-inline: auto; }
  .eng-grid, .why-grid, .zones-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .zones-grid { gap: var(--space-12); }
  .eng-side { position: static; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card, .svc-big { grid-column: span 1; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .tile-tall { grid-row: span 1; }
  .b2b-values { grid-template-columns: repeat(2, 1fr); }
  .b2b-cta { flex-direction: column; align-items: flex-start; }
  .temo-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .container { padding-inline: var(--space-4); }
  .nav-wrap { padding-inline: var(--space-4); }
  .nav-links { display: none; }
  /* Nav CTAs hidden on mobile: the top "Urgence 24/24" pill + full burger could
     not both fit the pill at 320–375 (burger overflowed the pill to r=376). The
     always-visible sticky bottom bar ("Appeler") is the emergency action on
     mobile, and the drawer carries both CTAs — so a clean logo+burger nav is the
     correct mobile pattern, not a cramped duplicate button. */
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-regies-link { display: none; }
  .nav-pill { gap: var(--space-3); justify-content: space-between; }
  .sticky-desktop { display: none; }
  .sticky-mobile { display: flex; }
  body { padding-bottom: 76px; }

  .hero { padding-top: 8rem; }
  .hero-h1 { margin-top: var(--space-3); }
  .hero-cta { flex-direction: column; gap: var(--space-4); width: 100%; }
  .cta-stack { width: 100%; }
  .cta-stack .btn { width: 100%; }
  .cta-note { max-width: none; }
  /* keep the composed cluster contained + prevent badge/hex overflow at 360px */
  .hero-media-stack { padding: 10px 10px 18px 0; }
  .hero-img img { height: 52dvh; max-height: 400px; min-height: 320px; object-position: center 60%; }
  .hero-hex { width: 52px; height: 52px; top: 8px; right: 8px; }
  .hero-hex svg { width: 38px; height: 38px; }
  /* Mobile: chip + badge were colliding at 320–390 (both pinned to the image
     bottom, 244px chip vs 145px badge → 52–122px horizontal overlap covering the
     chip text). Fix: badge moves to the TOP-RIGHT under the hex; chip stays
     bottom-left. Full vertical separation, no overlap. */
  .hero-badge { top: 66px; right: 8px; bottom: auto; padding: .5rem .75rem; }
  .hero-badge-num { font-size: 1.55rem; }
  .img-chip { left: 8px; right: auto; bottom: 8px; padding: .5rem .85rem; max-width: calc(100% - 16px); }
  .hero-temp-rail { right: 0; width: 66%; }
  .hero-trust { gap: .5rem .7rem; }
  .trust-sep { display: none; }

  .urgence-card { padding: var(--space-6); }
  .urgence-btn { width: 100%; }
  .tri-grid { grid-template-columns: 1fr; }
  .tri-img img { height: 200px; }
  /* spectrum legend: bar on top, three labels in one wrapping row beneath */
  .tri-spectrum { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
  .tri-spectrum-bar { flex: 1 0 100%; }
  .tri-spectrum-lbl { flex: 0 0 auto; }
  .svc-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .tile-wide { grid-column: span 1; }
  .values { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .founders { flex-direction: column; align-items: flex-start; }
  .founders-img, .founders-img img { width: 100%; height: 200px; }
  .founders-img { flex: 0 0 auto; }
  .temo-head { flex-direction: column; align-items: flex-start; }
  .temo-rating { align-items: flex-start; }
  .temo-grid { grid-template-columns: 1fr; }
  .temo-feature { padding: var(--space-10) var(--space-6) var(--space-6); }
  .quote-mark { font-size: 7rem; }
  .b2b-values { grid-template-columns: 1fr; }
  .b2b-value { padding: var(--space-6); }
  .b2b-cta { padding: var(--space-8) var(--space-6); }
  .b2b-cta-actions { width: 100%; flex-direction: column; }
  /* Map SVG labels become an illegible ~7px blob at phone width — hide the whole
     map + legend on mobile and show the readable commune pill list instead. */
  .sam-frame, .sam-legend { display: none; }
  .zones-pills { display: flex; }
  .lead-form { grid-template-columns: 1fr; }
  .form-submit { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .sec-cta .btn { width: 100%; }
  .btn { width: 100%; }
  .nav-cta .btn { width: auto; }
  .drawer-cta .btn { width: 100%; }
  .chip, .link-arrow, .link-urg { width: auto; }

  /* Decorative hexagon watermarks extended ~80px past the viewport edge on
     mobile (rotation expands their bounding box past the negative offset;
     clipped by body overflow, but wasteful paint). They add nothing at phone
     size — hide them outright. */
  .bg-hex { display: none; }

  /* Inline text links that were under the 44px touch target on mobile: NAP
     phone/email, socials, the footer emergency-band number, and the logo home
     link (34px tall = the logo image). Give each a comfortable tap height
     without disturbing the prose flow. */
  .nap-list dd a, .socials a, .footer-urgence a, .urgence-text p a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .socials { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; }
  .nav-logo { min-height: 44px; }
  .footer-nav { gap: var(--space-4) var(--space-5); }
  .footer-nav a { padding-inline: .25rem; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}