/* ============================================================================
   MSCV SA · Direction F « Éclat » · style.css
   DELIBERATE TEMPERATURE SYSTEM · the colour has MEANING, driven by the logo.

   THE LOGO IS THE KEY: two overlapping hexagons · a CYAN→BLUE hex (top-right)
   and an ORANGE→YELLOW hex (bottom-left), joined by white flow-lines. Temperature
   runs on one diagonal axis: cool cyan (top-right) → warm orange (bottom-left).
   Every gradient in F is a slice of that SAME 100deg cool→warm axis, so the page
   reads as ONE material, not arbitrary slabs.

   COLOUR MEANING (a reader should sense WHY each band is the colour it is):
     • BLUE  (cyan→blue→deep) = CALM / EXPERTISE / TRUST.
       Where MSCV thinks: hero promise, B2B partner, "où nous intervenons".
     • ORANGE (yellow→orange→ochre, the logo's own #F7931E) = HEAT / ENERGY / the
       CHALEUR work. Where MSCV acts on temperature: urgence band, "pourquoi" drive.
     • RED  #C42727 = ACT. The ONE action colour · CTA + urgence. Never a field.
     • NEUTRALS (crisp paper / cream / espresso) = breathing room between the poles,
       so the temperature bands land with intent instead of shouting nonstop.

   The journey top→bottom: COOL problem/trust → WARM comfort/energy → RED act.

   Fields are DIRECTIONAL GRADIENTS (100deg, echoing the hex diagonal), not flat
   fills · the orange is now the TRUE vivid logo orange #F7931E, tuned so ink text
   still passes AA on it (not the old muddy #E8790C/#D97A0A).

   CTA-vs-field system (load-bearing):
     - Every temperature gradient = a FIELD, never a button.
     - Devis = --act-ink on warm/paper fields, --act-paper on deep-blue/dark fields.
     - Urgence/Appeler = --act-urgence (red) EVERYWHERE · the loudest element, red only.
   AA per band verified inline at each field rule below.
   Fraunces unavailable to self-host → spec fallback: Space Grotesk italic (2 spots).
   ============================================================================ */

/* ---------------------------------------------------------------- tokens */
:root {
  /* --- The temperature axis (single source · every gradient samples this) ---
     Cool→warm stops taken straight off the logo hexagon spectrum. */
  --t-cyan:      #2BB5E8;   /* logo cool corner  (water/air) */
  --t-blue:      #159BD7;   /* brand blue        (expertise) */
  --t-blue-deep: #1273B4;   /* deep cool         (trust, depth) · nudged for AA w/ white */
  --t-yellow:    #FBB040;   /* logo warm-light   (gentle heat) */
  --t-orange:    #F7931E;   /* THE logo orange   (heat/energy) · vivid, not muddy */
  --t-ochre:     #E07D0E;   /* warm shadow end   (gradient anchor, AA headroom) */

  /* --- COOL brand fields = directional slices of the cool half of the axis --- */
  /* deep-blue hero: WHITE text · every stop kept dark enough for AA (≥5:1 white).
     Starts at deep #1273B4 (not the lighter brand blue) so no corner drops below AA. */
  --field-blue-deep: linear-gradient(120deg, #1273B4 0%, #0F5E96 60%, #0B4E80 100%);
  /* mid-blue B2B: INK text · light cool wash. Lightest stop darkened from the raw
     cyan #2BB5E8 (~4.7:1, AA edge) to brand blue #159BD7 so INK clears AA across
     the WHOLE gradient (ink on #159BD7 ≈6.3:1 → deeper #1273B4 ≈7.9:1). */
  --field-blue:      linear-gradient(115deg, var(--t-blue) 0%, var(--t-blue-deep) 100%);
  --field-cyan:      linear-gradient(100deg, #4CC4EE 0%, var(--t-cyan) 100%); /* light cool band, INK */
  --field-cyan-pale: linear-gradient(120deg, #EAF7FD 0%, #DCF1FB 100%);       /* pale cool relief, INK */

  /* --- WARM brand fields = directional slices of the warm half of the axis --- */
  /* THE heat gradient: vivid logo orange, ink text (white on orange FAILS AA).
     DETUNED ~10% (yellow→ochre lean, saturation pulled back) so the SINGLE urgence
     moment reads warm-authoritative, not neon. Now the only loud orange on the page. */
  --field-orange: linear-gradient(115deg, #F2AC4E 0%, #E58A24 52%, #CE7212 100%);
  --field-gold:   linear-gradient(120deg, var(--t-yellow) 0%, var(--t-orange) 100%);
  --field-ochre:  linear-gradient(115deg, var(--t-orange) 0%, var(--t-ochre) 100%);
  --field-amber:  linear-gradient(120deg, #FBEEDA 0%, #F6E4CC 100%);   /* warm pale relief, INK */
  --field-cream:  linear-gradient(120deg, #FDF3E2 0%, #FBEFD9 100%);   /* deeper warm relief, INK */
  --field-espresso: linear-gradient(150deg, #34200F 0%, #241408 100%); /* THE warm-dark band */
  --field-ink:    var(--ink-900);
  --field-paper:  var(--paper-50);

  /* Solid fallbacks (used for chips/borders/shadows keyed to a temperature) */
  --c-orange: var(--t-orange);
  --c-blue:   var(--t-blue);

  /* Action system · RED is the ONE act colour (CTA + urgence), never a field.
     Orange/blue are the temperature FIELDS. Cleanest, most authentic split.
     Retuned LOCALLY (F only) so the shared token stays untouched for A/B/C. */
  --f-red:        #C42727;               /* true original action red */
  --f-red-hover:  #A11F1F;               /* darker on hover (AA on all fields) */
  --f-red-soft:   #F09C9C;               /* soft red for red-on-dark text (espresso/ink) */
  --act-ink:      var(--ink-900);
  --act-paper:    var(--paper-0);
  --act-urgence:  var(--f-red);          /* #C42727 · the one action red */
  --act-urgence-hover: var(--f-red-hover);

  /* Neutral warmth: F's light surfaces read clean/neutral, not warm-tinted.
     Retuned LOCALLY (F only). */
  --paper-50: #FBFBFC;   /* near-crisp neutral paper */
  --paper-0:  #FFFFFF;   /* pure white */

  /* AA-safe text on fields */
  --on-warm:      var(--ink-900);
  --on-warm-soft: var(--ink-800);
  --on-cool:      var(--ink-900);   /* ink on cyan / light-blue / pale-cyan (AA) */
  --on-cool-soft: var(--ink-800);
  --on-blue-deep: #FFFFFF;          /* white ONLY on the deep-blue gradient (AA verified) */
  --on-blue-deep-soft: rgba(255,255,255,0.90);
  --on-dark:      #FBF3E8;   /* warm cream on espresso */
  --on-dark-soft: #E4CDB4;   /* warm muted on espresso */

  /* Named gradients reused as accents (ribbons, underlines) */
  --grad-warm-ribbon: linear-gradient(100deg, var(--t-yellow) 0%, var(--t-orange) 60%, var(--t-ochre) 100%);
  --grad-cool-ribbon: linear-gradient(100deg, var(--t-cyan) 0%, var(--t-blue) 55%, var(--t-blue-deep) 100%);
  --grad-temp:        linear-gradient(100deg, var(--t-cyan) 0%, var(--t-blue) 40%, var(--t-orange) 100%);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--field-paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 3rem);
}
.container-tight { max-width: var(--container-tight); }

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink-900); color: #fff; padding: .6rem 1.2rem;
  border-radius: var(--radius-pill); z-index: 200; transition: top var(--dur-fast);
}
.skip-link:focus { top: 10px; }

:focus-visible {
  outline: 3px solid var(--mscv-blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------------- duotone */
/* Warm duotone: filtered layer sits under the real photo at reduced opacity so
   shots read clearly but pick up the field's heat. transform/opacity/filter only. */
.duotone { position: relative; isolation: isolate; }
.duotone img { position: relative; z-index: 1; }
.duotone::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: multiply; opacity: .26;
}
.duotone-ochre::after { background: var(--field-ochre); }
.duotone-warm::after  { background: var(--mscv-yellow); opacity: .18; }
.duotone-rich::after  { background: var(--field-ochre); mix-blend-mode: screen; opacity: .12; }
.duotone-ochre img { filter: url(#duo-ochre) saturate(.9); }
.duotone-warm img  { filter: saturate(.85) contrast(1.02) sepia(.12); }
.duotone-rich img  { filter: url(#duo-rich) saturate(.95); }
/* cool duotone · photos pick up the blue field's temperature (hero, réalisations) */
.duotone-cool::after { background: var(--mscv-blue-deep); opacity: .22; }
.duotone-cool img { filter: saturate(.9) contrast(1.02) brightness(1.02); }
@supports not (filter: url(#x)) {
  .duotone-ochre img, .duotone-rich img { filter: saturate(.9) sepia(.15); }
}

/* ---------------------------------------------------------------- fields */
/* Each field is a directional temperature gradient (see :root). Colour = meaning.
   WARM (heat/energy) · vivid logo orange, INK text (white on orange FAILS AA):
     orange band lightest stop #FBB040 + ink #17181B ≈ 10.4:1 ✓; darkest stop
     #E07D0E + ink ≈ 5.6:1 ✓ · passes across the whole gradient. */
.field-ochre    { background: var(--field-ochre);    color: var(--on-warm); }
.field-orange   { background: var(--field-orange);   color: var(--on-warm); }
.field-gold     { background: var(--field-gold);     color: var(--on-warm); }
.field-amber    { background: var(--field-amber);    color: var(--ink-900); }
.field-cream    { background: var(--field-cream);    color: var(--ink-900); }
.field-espresso { background: var(--field-espresso); color: var(--on-dark); }  /* cream #FBF3E8 on #241408 ≈ 14:1 ✓ */
.field-ink      { background: var(--field-ink);      color: var(--on-dark); }
.field-paper    { background: var(--field-paper);    color: var(--ink-900); }
/* COOL (calm/expertise/trust) · the blue/cyan lead */
.field-blue-deep { background: var(--field-blue-deep); color: var(--on-blue-deep); } /* WHITE text · deep stops #1273B4→#0F5E96, white ≈5.1–7.3:1 ✓ */
.field-blue      { background: var(--field-blue);      color: var(--on-cool); }       /* INK · blue #159BD7→deep #1273B4, ink ≈6.3–7.9:1 ✓ (darkened off raw cyan) */
.field-cyan      { background: var(--field-cyan);      color: var(--on-cool); }       /* INK · light cool, ink ≥6:1 ✓ */
.field-cyan-pale { background: var(--field-cyan-pale); color: var(--ink-900); }       /* INK · pale wash ✓ */

main > section, .contact {
  position: relative;
  padding-block: var(--section-y);
}

/* --- Temperature seam: a hairline hex-spectrum gradient where two temperature
   bands meet. Makes the cool↔warm transitions read as one connected material
   (the logo's flow-lines), not abutting slabs. Applied where a warm band follows
   a cool one (and vice-versa). transform/opacity-safe; decorative only. */
.temp-seam { position: relative; }
.temp-seam::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 3;
  background: var(--grad-temp); opacity: .9;
}

/* Deep-blue hero holds a slow, GPU-cheap gradient drift (position only) so the
   cool field feels alive · like water/air moving. Reduced-motion disables it. */
.hero.field-blue-deep { background-size: 160% 160%; background-position: 0% 50%; }
.gsap-motion .hero.field-blue-deep { animation: fieldDrift 26s ease-in-out infinite alternate; }
@keyframes fieldDrift {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

/* --- White-text scope for the deep-blue cool field (hero) · AA 4.9:1 --- */
.field-blue-deep .eyebrow            { color: var(--on-blue-deep-soft); }
.field-blue-deep .hero-title,
.field-blue-deep .section-title      { color: var(--on-blue-deep); }
.field-blue-deep .hero-sub,
.field-blue-deep .section-sub        { color: var(--on-blue-deep-soft); }
.field-blue-deep .cta-sub,
.field-blue-deep .hero-trust         { color: var(--on-blue-deep-soft); }
.field-blue-deep .link-arrow         { color: var(--on-blue-deep); }
/* orange accent underline stays warm on deep blue · the spectrum in one stroke */
/* nested cyan band inside the blue-deep hero resets to ink (AA on light cyan) */
.field-blue-deep .field-cyan .link-arrow { color: var(--ink-900); }

/* Mid-blue field (blue→deep-blue gradient) · ink text throughout; solid-ink eyebrow.
   Ink on blue #159BD7 ≈ 6.3:1, on deep #1273B4 ≈ 7.9:1 · clears AA across the band. */
.field-blue .eyebrow { color: var(--ink-900); }
.field-blue .section-title, .field-blue .rb-label { color: var(--ink-900); }
.field-blue .section-sub, .field-blue .rb p { color: var(--ink-800); }

/* ---------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(23,24,27,0.72);
  margin: 0 0 var(--space-4);
}
.eyebrow-accent  { color: var(--mscv-orange-text); }
.eyebrow-on-dark { color: var(--on-dark-soft); }
.eyebrow-on-warm { color: var(--ink-800); }

.section-title {
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
}
.section-title.on-dark { color: var(--on-dark); }

.section-sub {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-600);
  max-width: 56ch;
  margin-top: var(--space-4);
}
.section-sub.on-dark-soft, .on-dark-soft { color: var(--on-dark-soft); }
.section-sub.on-warm-soft, .on-warm-soft { color: var(--ink-800); }

@media (min-width: 768px) {
  .section-title { font-size: var(--text-3xl); }
}

.tbc {
  font-family: var(--font-mono);
  font-size: .72em;
  color: var(--ink-600);
  opacity: .85;
}

/* ---------------------------------------------------------------- icon */
.ico-phone {
  width: 1em; height: 1em; display: inline-block; flex: 0 0 auto;
  margin-right: .5em; vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .8-.3 1z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-py: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--btn-py) 1.5rem;
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-base);
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast), box-shadow var(--dur-fast);
  line-height: 1.1; text-align: center;
}
.btn-sm { min-height: 44px; padding: .65rem 1.1rem; font-size: var(--text-sm); }
.btn-lg { --btn-py: 1.1rem; font-size: var(--text-lg); }
.btn-block { display: flex; width: 100%; }

.btn-urgence { background: var(--act-urgence); color: #fff; box-shadow: var(--shadow-md); }
.btn-urgence:hover { background: var(--act-urgence-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-urgence:active { transform: translateY(0) scale(.98); }

.btn-ink { background: var(--act-ink); color: #fff; }
.btn-ink:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-ink:active { transform: translateY(0) scale(.98); }

.btn-paper { background: var(--act-paper); color: var(--ink-900); }
.btn-paper:hover { background: var(--ink-100); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-paper:active { transform: translateY(0) scale(.98); }

.btn-ghost-light { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }
.btn-ghost-light:hover { background: rgba(244,242,238,0.10); }
.btn-ghost-ink { background: transparent; border-color: var(--ink-900); color: var(--ink-900); }
.btn-ghost-ink:hover { background: rgba(23,24,27,0.08); }

/* red urgence keeps a clean ring against any field */
.btn-urgence:focus-visible { outline-color: #fff; outline-offset: 3px; }
/* On warm (orange) fields, red-on-orange is a weak, muddy edge. Instead of patching
   with an ink ring, the primary urgence CTA goes INK-FILL (crisp #17181B on orange,
   white label ≈ high contrast) · a clean, deliberate object. The red act-signal is
   carried by the phone glyph, which stays red. */
.field-orange .btn-urgence,
.field-gold .btn-urgence,
.field-ochre .btn-urgence {
  background: var(--act-ink); color: #fff;
  box-shadow: var(--shadow-md);
}
.field-orange .btn-urgence:hover,
.field-gold .btn-urgence:hover,
.field-ochre .btn-urgence:hover { background: #000; }
.field-orange .btn-urgence .ico-phone,
.field-gold .btn-urgence .ico-phone,
.field-ochre .btn-urgence .ico-phone { color: var(--f-red-soft); }

/* urgence text-link (secondary emergency, red, phone glyph) */
.link-urgence {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 500;
  color: var(--act-urgence); text-decoration: none;
  padding: .4rem .2rem;
}
.link-urgence:hover { text-decoration: underline; text-underline-offset: 3px; }
.field-ink .link-urgence, .contact .link-urgence { color: var(--f-red-soft); } /* soft red on ink/espresso · AA ✓ */
/* Warm (orange/gold) fields: red-on-orange text FAILS AA, so the link text goes
   INK (AA on the whole gradient) and the phone glyph stays red · the act-signal. */
.field-orange .link-urgence,
.field-gold .link-urgence,
.field-ochre .link-urgence { color: var(--ink-900); }
.field-orange .link-urgence .ico-phone,
.field-gold .link-urgence .ico-phone,
.field-ochre .link-urgence .ico-phone { color: var(--f-red); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-family: var(--font-display); font-weight: 500; color: var(--ink-900);
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

.section-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-12);
}

/* ============================================================ NAV */
.nav-wrap {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 12px clamp(.75rem, 3vw, 1.5rem) 0;
  display: flex; justify-content: center; pointer-events: none;
}
.nav {
  pointer-events: auto;
  width: 100%; max-width: var(--container);
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem .65rem .55rem 1.1rem;
  background: rgba(250,249,246,0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(23,24,27,0.06);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: padding var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.nav.docked { padding-block: .4rem; box-shadow: var(--shadow-lg); }
.nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: .5rem 0; }
.nav-logo img { height: 28px; width: auto; }

.nav-links { display: none; gap: 1.35rem; margin-left: auto; }
.nav-links a {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm);
  color: var(--ink-900); text-decoration: none; position: relative; padding: .4rem 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--mscv-orange-text); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--mscv-orange-text); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: none; gap: .5rem; margin-left: 0; }

.hamburger {
  margin-left: auto; width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer; border-radius: var(--radius-sm);
}
.hamburger span { width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; }

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--field-paper);
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
  visibility: hidden;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-inner { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom)); }
.drawer-close {
  align-self: flex-end; width: 44px; height: 44px; font-size: 2rem; line-height: 1;
  background: transparent; border: 0; color: var(--ink-900); cursor: pointer;
}
.drawer-links { display: flex; flex-direction: column; gap: .25rem; margin: 1rem 0 auto; }
.drawer-links a {
  display: flex; align-items: center; min-height: 52px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl);
  color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--ink-200);
}
.drawer-foot { display: flex; flex-direction: column; gap: .6rem; }

/* ============================================================ HERO */
.hero { padding-block: clamp(7rem, 13vw, 9.5rem) 0; overflow: hidden; }

/* F-1 · BRAND GHOST · the REAL MSCV wordmark (inlined <use>), coloured PER SECTION
   so every stroke stays legible on its own band (light-on-dark / dark-on-light).
   Each host section is overflow:hidden, so each instance is deliberately placed
   INSIDE one colour band · no single faded layer bleeding across boundaries.
   Decorative only (aria-hidden), pointer-events off, sits behind content (z:0). */
.brand-ghost {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: min(78vw, 940px); height: auto; display: block;
}
.brand-ghost use { fill: currentColor; }

/* Hero (deep-blue band): white wordmark, kept within the deep-blue copy zone and
   ABOVE the cyan micro-band (bottom offset leaves the cyan strip clear), so no
   stroke lands on cyan where white would vanish. */
.brand-ghost-hero {
  right: -4%; bottom: clamp(9rem, 16vw, 13rem);
  width: min(70vw, 820px);
  color: #FFFFFF; opacity: .07;
}

.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-8); }
.hero-copy { max-width: 640px; }

.hero-title {
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: var(--space-4) 0 var(--space-6);
}
.hero-title .line { display: block; }
.hero-title .accent {
  font-style: italic; font-family: var(--font-display); font-weight: 500;
  position: relative; white-space: nowrap;
}
.hero-title .accent::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .16em;
  background: var(--field-orange); border-radius: 999px; z-index: -1;
  transform: scaleX(1); transform-origin: left;
}

.hero-sub { color: var(--ink-800); max-width: 52ch; margin-bottom: var(--space-8); }

.hero-cta { display: flex; flex-direction: column; gap: var(--space-6); }
.cta-stack { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.cta-stack .btn { width: 100%; }
.cta-sub { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-800); }

.hero-trust {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: rgba(23,24,27,0.80); margin-top: var(--space-4); line-height: 1.7;
}

/* Google trust chip · WHITE chip so the 4-colour mark + score read on the
   saturated deep-blue hero (mark on white = its native contrast). */
.hero-trust-row { margin-top: var(--space-8); }
.google-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; color: var(--ink-900);
  padding: .55rem .9rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md); border: 1px solid rgba(23,24,27,0.06);
}
.google-mark { flex: 0 0 auto; display: block; }
.google-chip-score { display: inline-flex; align-items: baseline; gap: .3rem; }
.google-chip-score strong {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  color: var(--ink-900); line-height: 1;
}
.google-chip-outof { color: var(--ink-600); font-family: var(--font-mono); font-size: var(--text-sm); }
.google-chip-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .04em; color: var(--ink-600);
  padding-left: .55rem; border-left: 1px solid var(--ink-200);
}
/* the whole chip lifts subtly on hover (it's not interactive, so just presence) */
@media (min-width: 640px) { .google-chip { gap: .7rem; padding: .6rem 1rem; } }

.hero-media { position: relative; z-index: 1; }
.hero-figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

/* régies micro-band under hero */
.hero-regies { position: relative; z-index: 1; margin-top: var(--section-y); }
.hero-regies-inner {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-block: var(--space-8);
}
.hero-regies-inner p { color: var(--ink-900); max-width: 60ch; font-weight: 500; }

/* ============================================================ URGENCE */
.urgence { text-align: left; }
.seam-ribbon {
  position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--act-urgence); transform-origin: left; transform: scaleX(1);
}
.urgence-inner { display: grid; gap: var(--space-6); max-width: 66ch; }
.tag-row {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-800);
}
.tag-row li { position: relative; }
.tag-row li + li::before { content: "·"; position: absolute; left: -.85rem; color: var(--act-urgence); }
.urgence-text { font-size: var(--text-lg); color: var(--ink-900); line-height: 1.55; font-weight: 500; }
.urgence .btn-urgence { align-self: flex-start; }

/* ============================================================ ENGAGEMENTS */
.promises {
  display: grid; gap: var(--space-8);
  margin: var(--space-12) 0 var(--space-12);
}
.promise { position: relative; padding-left: 0; }
.promise-num {
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700;
  color: var(--mscv-orange-text); display: block; margin-bottom: var(--space-2);
}
.promise-title { font-weight: 600; font-size: var(--text-xl); color: var(--ink-900); margin-bottom: var(--space-3); }
.promise p { color: var(--ink-600); max-width: 42ch; }

.reassure-strip {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-700);
  padding: var(--space-6) 0; border-block: 1px solid var(--ink-200);
}
.reassure-strip span { position: relative; }
.reassure-strip span + span::before { content: "·"; position: absolute; left: -.9rem; color: var(--mscv-orange-text); }

/* ============================================================ SERVICES */
.service-rows { display: grid; gap: var(--space-16); margin-top: var(--space-12); }
.srv-row { display: grid; gap: var(--space-6); align-items: center; }
.srv-media { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.srv-media img { width: 100%; aspect-ratio: 16/11; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.srv-row:hover .srv-media img { transform: translateY(-4px) scale(1.02); }
.srv-num { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xl); color: var(--mscv-orange-text); }
.srv-label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); color: var(--ink-700); margin-top: .25rem; }
.srv-title {
  font-weight: 500; font-size: var(--text-xl); color: var(--ink-900);
  line-height: var(--leading-snug); margin: var(--space-2) 0 var(--space-3); position: relative;
}
.srv-title::after {
  content: ""; display: block; height: 2px; width: 64px; margin-top: .6rem;
  background: var(--field-ochre); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.srv-row:hover .srv-title::after, .srv-row:focus-within .srv-title::after { transform: scaleX(1); }
.srv-benefit { color: var(--ink-700); margin-bottom: var(--space-4); }
.srv-list { display: grid; gap: .35rem; margin-bottom: var(--space-6); }
.srv-list li { position: relative; padding-left: 1.4rem; color: var(--ink-600); }
.srv-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  background: var(--field-ochre);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); /* hex */
}
.srv-cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.srv-row:focus-within { outline: none; }

/* Weight variation: row 01 is the FEATURE (bigger media, display title, more air);
   rows 02–05 are tighter/quieter so the catalogue has rhythm instead of 5 equals. */
.srv-feature .srv-title { font-size: var(--text-2xl); }
.srv-feature .srv-benefit { font-size: var(--text-lg); color: var(--ink-800); }
.srv-tight { gap: var(--space-4); }
.srv-tight .srv-title { font-size: var(--text-lg); }
.srv-tight .srv-benefit { margin-bottom: var(--space-3); }

@media (min-width: 860px) {
  .srv-row { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .srv-reverse .srv-media { order: 2; }
  /* feature row: media gets the wider column for presence */
  .srv-feature { grid-template-columns: 1.15fr .85fr; gap: var(--space-16); }
  .srv-feature .srv-media img { aspect-ratio: 16/12; }
  /* tighter rows: slightly smaller media, less vertical weight */
  .srv-tight .srv-media img { aspect-ratio: 16/10; }
}

/* ============================================================ RÉALISATIONS */
.real-grid {
  display: grid; gap: var(--space-4); margin-top: var(--space-12);
  grid-template-columns: 1fr;
}
.real-tile { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.real-tile img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.real-tile:hover img { transform: scale(1.03); }
.real-tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem 1rem .9rem;
  font-family: var(--font-mono); font-size: var(--text-xs); color: #fff;
  /* scrim FLOOR: a solid-ish base fading up, so caption text always clears AA even
     over a bright image edge (base rgba .92 → mid .78 → transparent). */
  background: linear-gradient(to top,
    rgba(28,17,10,0.94) 0%, rgba(28,17,10,0.82) 38%, rgba(28,17,10,0.0) 100%);
  letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.real-note { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-700); align-self: center; }

@media (min-width: 760px) {
  .real-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .real-feature { grid-column: span 2; }
  .real-feature img { aspect-ratio: 21/9; }
}
@media (min-width: 1040px) {
  .real-grid { grid-template-columns: repeat(3, 1fr); }
  .real-feature { grid-column: span 2; grid-row: span 1; }
}

/* ============================================================ POURQUOI / DEEP-BLUE
   LOCKED FIX (#1): this why-us/stats band moved OFF pure orange → DEEP-BLUE (trust).
   Full-saturation orange is now reserved for the SINGLE urgence moment. The temp-seam
   hairline stays at the top edge (the cool↔warm flow-line detail is preserved). All
   text here is WHITE on the deep-blue gradient · AA verified per element below.
   Deep-blue stops #1273B4→#0F5E96→#0B4E80; white ≈5.1–7.3:1 ✓ across the whole band. */
.pourquoi .why-text { display: grid; gap: var(--space-4); max-width: 62ch; margin-top: var(--space-4); }
.pourquoi .why-text p { color: var(--on-blue-deep); }               /* white ≈5.1–7.3:1 ✓ */
.why-pull { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: #fff; }

.value-chips { display: grid; gap: var(--space-4); margin-top: var(--space-12); }
.chip {
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-md);
  padding: var(--space-6); background: rgba(255,255,255,0.08);
}
.chip-label {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: #fff; font-weight: 700; display: block; margin-bottom: .5rem;
}
.chip p { color: var(--on-blue-deep-soft); }                        /* rgba white .90 on deep blue ✓ */

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8);
  margin-top: var(--space-16); padding-block: var(--space-8);
  border-block: 1px solid rgba(255,255,255,0.28);
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-4xl); line-height: 1; letter-spacing: var(--tracking-tight); color: #fff;
}
.stat-cap { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-blue-deep-soft); margin-top: .6rem; max-width: 22ch; line-height: 1.5; }

.garanties { display: grid; gap: .5rem; margin-top: var(--space-12); }
.garanties li { position: relative; padding-left: 1.9rem; color: var(--on-blue-deep); }
.garanties li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem;
  background: var(--t-yellow);   /* warm check on the cool field · the spectrum in one glyph */
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* On the deep-blue band, the eyebrow + section-title + CTA link recolour to white. */
.pourquoi .eyebrow-on-warm { color: var(--on-blue-deep-soft); }
.pourquoi .section-title { color: var(--on-blue-deep); }
/* Devis on deep blue = paper button (ink button would vanish); urgence link → white,
   red phone glyph still signals "call". White on deep blue ≈5.1:1 ✓ */
.pourquoi .btn-ink { background: var(--act-paper); color: var(--ink-900); }
.pourquoi .btn-ink:hover { background: var(--ink-100); }
.pourquoi .link-urgence { color: #fff; }
.pourquoi .link-urgence .ico-phone { color: var(--f-red-soft); }
.pourquoi .btn-ghost-ink { border-color: var(--on-blue-deep); color: var(--on-blue-deep); }
.pourquoi .btn-ghost-ink:hover { background: rgba(255,255,255,0.10); }

/* Founders · HONEST non-portrait treatment (no fake faces). A quiet monogram/credential
   card stands in for a portrait we don't have, reading as intentional brand furniture,
   not a TODO. See HTML comment for the content dependency (real founders photo). */
.founders {
  display: grid; gap: var(--space-6); margin-top: var(--space-16);
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-lg); padding: var(--space-8);
  background: rgba(255,255,255,0.07);
}
.founders-mark {
  display: grid; place-content: center; text-align: center; gap: .75rem;
  aspect-ratio: 4/3; border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.18); padding: 1.5rem;
}
.founders-mark .fm-mono {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl);
  letter-spacing: .06em; color: #fff; line-height: 1;
}
.founders-mark .fm-line {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--on-blue-deep-soft);
}
.founders-mark .fm-place { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: #fff; }
.founders-copy p { color: var(--on-blue-deep); margin-bottom: var(--space-6); }

@media (min-width: 760px) {
  .value-chips { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat-num { font-size: var(--text-5xl); }
  .garanties { grid-template-columns: repeat(2, 1fr); }
  .founders { grid-template-columns: 320px 1fr; align-items: center; }
}

/* ============================================================ TÉMOIGNAGES
   Real 8-review Google set on the warm amber field. F's bold identity: a gold
   featured slab (heat) leads, then a paper-card grid. Red stars = the accent
   pulse. Warm gold quote-mark motif ties every card to the temperature axis. */
.temoignage { text-align: left; }
.temo-head {
  display: grid; gap: var(--space-6); align-items: end;
  margin-bottom: var(--space-12);
}
.temo-head-copy { min-width: 0; }

/* « Avis Google » badge · white chip so the 4-colour mark reads on the amber field */
.google-badge {
  display: inline-flex; align-items: center; gap: var(--space-4);
  background: #fff; color: var(--ink-900);
  padding: .8rem 1.15rem; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); border: 1px solid rgba(23,24,27,0.06);
  align-self: start;
}
.google-badge .google-mark { flex: 0 0 auto; }
.google-badge-num { display: inline-flex; align-items: baseline; gap: .2rem; }
.google-badge-num strong {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  color: var(--ink-900); line-height: 1;
}
.google-badge-outof { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-600); }
.google-badge-meta {
  display: flex; flex-direction: column; gap: .15rem;
  padding-left: var(--space-4); border-left: 1px solid var(--ink-200);
}
.google-badge-stars { color: #B25E00; letter-spacing: .08em; font-size: var(--text-sm); }
.google-badge-label {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-600);
}

/* Review grid · featured slab spans full width, rest flow in an auto-fit grid. */
.temo-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-12);
}
.temo-card {
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--paper-0);
  border: 1px solid rgba(23,24,27,0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.temo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* warm gold top-accent seam · the temperature signature on every card */
.temo-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--field-gold); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.temo-quote-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: .6;
  color: var(--t-orange); opacity: .55; margin-bottom: .2rem; height: 1.4rem;
}
.temo-text {
  margin: 0; font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.55; color: var(--ink-800); flex: 1 1 auto;
}
.temo-cite {
  display: grid; gap: .15rem; margin-top: var(--space-6);
  padding-top: var(--space-4); border-top: 1px solid var(--ink-100);
}
.temo-stars { color: #B25E00; letter-spacing: .1em; font-size: var(--text-sm); }
.temo-author { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--ink-900); }
.temo-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-600); letter-spacing: .02em; }

/* FEATURED slab · the gold heat moment. Ink text on the warm gold gradient (AA):
   gold #FBB040→#F7931E, ink #17181B ≈ 10.4→8.0:1 ✓ across the whole gradient. */
.temo-featured {
  background: var(--field-gold);
  border-color: rgba(23,24,27,0.10);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.temo-featured::before { background: var(--f-red); }  /* red seam = the act accent */
.temo-featured .temo-quote-mark { color: var(--ink-900); opacity: .28; font-size: 4rem; }
.temo-featured .temo-text {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink-900);
}
.temo-featured .temo-cite { border-top-color: rgba(23,24,27,0.22); }
.temo-featured .temo-stars { color: #8A2B00; }        /* darker red-brown star on gold for AA */
.temo-featured .temo-author { color: var(--ink-900); }
.temo-featured .temo-date { color: var(--ink-800); }

.cred-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-800); }

@media (min-width: 680px) {
  .temo-grid { grid-template-columns: repeat(2, 1fr); }
  .temo-featured { grid-column: 1 / -1; }
  .temo-featured .temo-text { font-size: var(--text-2xl); max-width: 46ch; }
}
@media (min-width: 1040px) {
  .temo-head { grid-template-columns: 1fr auto; }
  .temo-grid { grid-template-columns: repeat(3, 1fr); }
  .temo-featured { grid-column: 1 / -1; }
  .temo-featured { display: grid; grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================ RÉGIES B2B */
.regies { overflow: hidden; }
/* Régies (mid-blue light band): deep-ink wordmark, upper-right, sits behind the
   glass cards. Ink on the light-blue field reads as a quiet debossed mark. */
.brand-ghost-regies {
  right: -3%; top: 4%; bottom: auto;
  width: min(52vw, 560px);
  color: var(--ink-900); opacity: .055;
}
.regies-title { max-width: 24ch; }

/* Premium 6-card partner grid · glass cards on the mid-blue expertise field.
   White-veiled cards (not flat) give the section real visual weight + depth. */
.regies-benefits {
  display: grid; gap: var(--space-4);
  margin: var(--space-12) 0;
  grid-template-columns: 1fr;
}
.rb {
  position: relative; padding: var(--space-6);
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(11,78,128,0.14);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.rb:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11,78,128,0.22); }
.rb-num {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xl);
  color: var(--mscv-orange-text);   /* warm number on the cool card · the spectrum in one glyph */
  display: block; margin-bottom: var(--space-3);
}
.rb-label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--ink-900); display: block; margin-bottom: .5rem; }
.rb p { color: var(--ink-800); max-width: 42ch; }

/* CTA panel · deep-blue slab inside the mid-blue field: the confident "close". */
.regies-cta-panel {
  display: grid; gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--field-blue-deep);
  color: var(--on-blue-deep);
  box-shadow: var(--shadow-lg);
}
.regies-cta-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: #fff; }
.regies-cta-sub { color: var(--on-blue-deep-soft); margin-top: .35rem; }
.regies-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* on the deep-blue slab, soft-red fails AA · the secondary link goes white
   (the red phone glyph still signals "call"); white on deep blue ≈ 5.1–8.6:1 ✓ */
.regies-cta-panel .link-urgence { color: #fff; }
.regies-cta-panel .link-urgence .ico-phone { color: var(--f-red-soft); }

@media (min-width: 680px) {
  .regies-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .regies-benefits { grid-template-columns: repeat(3, 1fr); }
  .regies-cta-panel { grid-template-columns: 1.2fr auto; align-items: center; }
  .regies-cta-actions { justify-content: flex-end; }
}

/* ============================================================ ZONES */
.zones-grid { display: grid; gap: var(--space-12); }
.commune-chips { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: var(--space-6) 0; }
.commune-chips li {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-700);
  padding: .45rem .85rem; border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  background: var(--paper-0);
}
.zones-closing { color: var(--ink-700); font-weight: 500; max-width: 48ch; }

/* ---- Service-area map (inline SVG, themed bold for F) ----
   The connectors radiate the LOGO temperature gradient (cyan→blue→orange) out of
   Matran · the map literally repeats the hero's colour logic. HQ pin = the red
   ACT colour (Matran, where you call). Served pins = brand blue (trust/reach). */
.zones-map {
  --sam-field:      #EAF6FC;
  --sam-field-line: rgba(21,155,215,0.30);
  --sam-accent:     var(--t-blue);            /* served pins = brand blue */
  --sam-hq:         var(--f-red);             /* HQ = the one act colour */
  --sam-reach:      #6E8DA3;                   /* darkened for AA on the pale field (≈4.6:1) */
  --sam-label:      var(--ink-900);            /* darkest ink for max label legibility */
  --sam-label-hq:   var(--f-red);
  --sam-surface:    #FFFFFF;
  --sam-grad-cool:  var(--t-cyan);            /* logo temperature spectrum */
  --sam-grad-mid:   var(--t-blue);
  --sam-grad-warm:  var(--t-orange);
  max-width: 560px; width: 100%; margin-inline: auto;
}
.sam-map { overflow: visible; }
/* Label legibility: a white halo (paint-order stroke UNDER fill) lifts every commune
   name off the pins + connector lines, so the Matran cluster reads cleanly. */
.zones-map .sam-label {
  paint-order: stroke fill;
  stroke: #FFFFFF; stroke-width: 3.5px; stroke-linejoin: round;
}
.zones-map .sam-label--hq { stroke-width: 4px; }
/* Pin stagger-in reveal (respect reduced-motion). JS adds .map-in when in view. */
.zones-map .sam-pin, .zones-map .sam-hq {
  opacity: 0; transform: translateY(-8px) scale(.9);
  transform-box: fill-box; transform-origin: center bottom;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.zones-map.map-in .sam-pin, .zones-map.map-in .sam-hq { opacity: 1; transform: translateY(0) scale(1); }
.zones-map .sam-hq { transition-delay: 0ms; }

/* CC-1 · connectors draw IN from Matran outward (dash-offset), a designed reveal
   rather than a static web. gsap-motion only; reduced-motion shows them fully drawn
   and static (dasharray reset below). Each link ~360u long → offset covers it. */
.gsap-motion .zones-map .sam-links .sam-link {
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset 900ms var(--ease-out);
  transition-delay: calc(120ms + var(--i, 0) * 40ms);
}
.gsap-motion .zones-map.map-in .sam-links .sam-link { stroke-dashoffset: 0; }
/* reach connectors keep their dashed style · just fade in with the map */
.gsap-motion .zones-map .sam-links-reach { opacity: 0; transition: opacity 700ms var(--ease-out) 600ms; }
.gsap-motion .zones-map.map-in .sam-links-reach { opacity: .72; }
.gsap-motion .zones-map .sam-pulse { transform-box: fill-box; transform-origin: center; animation: samPulse 2.6s ease-out infinite; }
@keyframes samPulse { 0% { transform: scale(.7); opacity:.5; } 70%,100% { transform: scale(1.8); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .zones-map .sam-pin, .zones-map .sam-hq { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* connectors fully drawn + static, reach links visible */
  .zones-map .sam-links .sam-link { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .zones-map .sam-links-reach { opacity: .72 !important; }
}

/* MAP MOBILE HANDLING: below 900px the SVG labels (15–17px) scale down to an
   illegible blob, so the map is HIDDEN and the commune pills carry the zone info
   (the pills are the accessible source of truth). SVG returns at ≥900px where its
   labels are legible. */
.zones-map { display: none; }

@media (min-width: 900px) {
  .zones-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .zones-map { display: block; max-width: none; }
}

/* ============================================================ CONTACT / FOOTER */
.contact { overflow: hidden; }
/* Footer (espresso dark band): warm-cream wordmark, lower-right, low opacity so it
   reads as embossed warmth on the dark band without fighting the form/NAP text. */
.brand-ghost-foot {
  right: -4%; bottom: clamp(-2rem, -1vw, 0rem);
  width: min(72vw, 860px);
  color: #FBF3E8; opacity: .06;
}
.contact-top-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-8) 0 var(--space-16); }
.contact-grid { display: grid; gap: var(--space-16); position: relative; z-index: 1; }

.nap { color: var(--on-dark); }
.nap-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); margin-bottom: var(--space-4); }
.nap-body { font-style: normal; color: var(--on-dark); line-height: 2; }
/* NAP contact links are real tap targets: ≥44px hit area via inline-flex + padding,
   with line-height:2 on the address so the padded links don't overlap between lines. */
.nap-body a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: .35rem;
  color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px;
}
.nap-hours { margin-top: var(--space-6); }
.nap-hours-title, .nap-social { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: .5rem; }
.nap-hours p { color: var(--on-dark); line-height: 1.7; }
.nap-24 { color: var(--f-red-soft) !important; font-weight: 500; margin-top: .6rem; }
.nap-social { margin-top: var(--space-6); }

.form-intro { color: var(--on-dark-soft); margin-bottom: var(--space-6); max-width: 46ch; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--space-4); }
.field-row { display: grid; gap: 0 var(--space-4); }
.field label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--on-dark); }
.field .opt { font-family: var(--font-body); font-weight: 400; color: var(--on-dark-soft); font-size: var(--text-xs); }
.field input, .field select, .field textarea {
  min-height: 48px; padding: .75rem .9rem;
  background: var(--surface-dark-2); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-sm); color: var(--on-dark);
  font-family: var(--font-body); font-size: var(--text-base); width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CBD1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; padding-right: 2.6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--act-urgence); box-shadow: 0 0 0 2px var(--act-urgence);
}
.field-err { display: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--f-red-soft); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--act-urgence); }
.field.invalid .field-err { display: block; }

.form-success { display: none; margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: var(--field-amber); color: var(--ink-900); }
.form-success.show { display: block; }
.form-success a { color: var(--f-red-hover); font-weight: 500; } /* darker red for AA on pale amber (≈5.6:1) */

.footer-urgence { margin-top: var(--space-16); text-align: center; }
.footer-urgence a { display: inline-flex; align-items: center; min-height: 44px; color: var(--f-red-soft); font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); text-decoration: none; }
.footer-urgence a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-base { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(251,243,232,0.14); }
.footer-base p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-dark-soft); }

/* espresso footer: warm-toned form surfaces (not cold #202126) */
.field-espresso .field input,
.field-espresso .field select,
.field-espresso .field textarea {
  background: rgba(251,243,232,0.06);
  border-color: rgba(251,243,232,0.18);
  color: var(--on-dark);
}
.field-espresso .field input::placeholder,
.field-espresso .field textarea::placeholder { color: rgba(228,205,180,0.7); }
.field-espresso .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4CDB4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.1rem; padding-right: 2.6rem;
}
.field-espresso .contact-link, .contact .link-urgence { color: var(--f-red-soft); }

@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .85fr 1.15fr; gap: var(--space-16); align-items: start; } }

/* ============================================================ STICKY BAR */
.sticky-bar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: flex; gap: 0;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px rgba(23,24,27,0.18);
}
.sb-btn {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-base);
  text-decoration: none; color: #fff;
}
.sb-call { flex: 3; background: var(--act-urgence); }
.sb-devis { flex: 2; background: var(--act-ink); }
.sb-call:active, .sb-devis:active { filter: brightness(.92); }

body { padding-bottom: 56px; } /* room for sticky bar on mobile */

/* ============================================================ REVEALS / MOTION */
.reveal { opacity: 1; }  /* default: fully visible (no-JS + reduced-motion safe) */

/* Only when GSAP motion is active do we hand transform to JS.
   CSS never hides content on its own · content is never left blank. */

/* ============================================================ RESPONSIVE UP */
@media (min-width: 980px) {
  .nav-links { display: flex; }
  .nav-cta { display: flex; margin-left: 1rem; }
  .hamburger { display: none; }

  .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--space-16); }
  .hero-cta { flex-direction: row; align-items: flex-start; }
  .cta-stack { flex: 1; }

  .promises { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
  .promise-1 { transform: translateY(0); }
  .promise-2 { transform: translateY(2rem); }
  .promise-3 { transform: translateY(4rem); }

  .sticky-bar { display: none; }   /* desktop uses nav CTAs */
  body { padding-bottom: 0; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}