/* ============================================================================
   MSCV SA · Direction B « Le Métier » · DARK · MSCV BRAND PALETTE
   The MSCV brand blue-led, on a dark stage: cyan + blue glow LEAD the identity,
   RED is the single action colour (honouring the live site's red-only CTA rule),
   and the signature cyan→blue→orange TEMPERATURE gradient is the wow moment.
   Orange survives ONLY inside that signature gradient / heat context, never as a
   button. Dark on-brand surfaces (--surface-dark family, cool charcoal · never
   warm), cream/paper text. Numbered craft-catalogue structure, condensed type,
   and motion are UNCHANGED · this is a colour/neutral pass only. Roles reuse the
   shared brand tokens from ../shared/tokens.css so the identity is hard-anchored.
   Structure/classes unchanged so the shared HTML + app.js keep working.

   NAMING NOTE: the legacy craft aliases (--copper*, --brass*, --ember) are kept
   as pass-throughs to explicit --accent* / --action* vars below, so the whole
   sheet reads coherently without touching every class. --accent = brand blue,
   --action = brand red.
   ============================================================================ */

/* --- Dark BRAND world tokens (override the light defaults for this direction) - */
:root {
  /* Backgrounds · on-brand dark surfaces (cool neutral charcoal, never warm) */
  --bg-0:            #121316;  /* deepest · footer, contrast wells */
  --bg-1:            var(--surface-dark);    /* #17181B primary surface */
  --bg-2:            var(--surface-dark-2);  /* #202126 alternating band */
  --bg-card:         #22242A;  /* raised cards on dark */
  --bg-card-2:       #2A2D34;  /* card hover / inset */
  --craft-wash:      #23262D;  /* material-wash sections (atelier, témoignage) · meaningfully lighter/warmer than bg-1 so they read as a distinct material band */

  /* Text · cream/paper family (all AA on the dark surfaces) */
  --cream:           var(--paper-50);  /* #FAF9F6 primary text/headings · ~15:1 on bg-1 */
  --cream-soft:      #CFCEC9;  /* secondary text · ~10:1 */
  --cream-dim:       #9A9CA3;  /* captions / muted · ~5.4:1 */

  /* Brand accents · cyan + blue LEAD the identity */
  --accent:          var(--mscv-blue);       /* #159BD7 primary accent · indices, rules */
  --accent-bright:   var(--mscv-cyan);       /* #2BB5E8 bright cyan · links/hover on dark (7.9:1) */
  --accent-deep:     var(--mscv-blue-deep);  /* #1C75BC secondary accent · dividers */

  /* ACTION = brand RED (single action colour, per the live site's red-only rule) */
  --action:          #C42727;   /* true-brand red · CTAs / action fills */
  --action-bright:   #E26F6F;   /* soft red · hover / on darkest wells */

  /* Legacy craft aliases → point at the real roles (no class churn) */
  --copper:          var(--accent);          /* was blue; stays blue */
  --copper-bright:   var(--accent-bright);   /* bright cyan */
  --brass:           var(--accent-deep);     /* deep blue · dividers */
  --brass-light:     var(--accent-bright);   /* bright cyan on darkest wells */
  --walnut:          #123A57;  /* deep brand-blue · decorative fills */
  --walnut-line:     #123048;  /* cool structural lines */
  --ember:           var(--action);          /* action red (emergency/CTA fills) */

  /* Signature temperature spectrum (cyan → blue → orange) · the wow on dark. */
  --grad-temp:       var(--grad-temperature);

  /* WARMTH · orange returns as a deliberate atelier/forge accent on the dark
     stage. Blue/cyan still LEAD; orange = heat/temperature glow only, NEVER a
     CTA (red owns action). Brightened for AA legibility on dark surfaces. */
  --warm:            #F7931E;   /* brand orange · heat fills, gradient warm-end */
  --warm-bright:     #FBB040;   /* brand yellow-orange · ember text/glow on dark (AA: ~9:1 on bg-1) */
  --glow-warm:       0 8px 22px rgba(247,147,30,0.30);   /* forge-warm glow */
  --hair-warm:       rgba(247,147,30,0.30);              /* warm hairline detail */

  /* Hairlines on dark · brand cyan/blue */
  --hair:            rgba(43,181,232,0.24);   /* cyan hairline */
  --hair-strong:     rgba(43,181,232,0.42);   /* heavier rule */
  --hair-cream:      rgba(250,249,246,0.12);  /* neutral paper hairline */
  --card-inset:      inset 0 0 0 1px rgba(43,181,232,0.14);
  --card-inset-hi:   inset 0 0 0 1px rgba(43,181,232,0.30);

  /* Ink used ON bright fills (cyan / blue / cream / orange buttons) */
  --on-fill:         var(--surface-dark);    /* #17181B */

  /* Elevation · deep for dark surfaces; glows carry the brand */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.52), 0 6px 14px rgba(0,0,0,0.34);
  --glow-copper: 0 10px 28px rgba(21,155,215,0.34);   /* brand-blue glow */
  --glow-ember:  0 10px 26px rgba(196,39,39,0.36);    /* action-red glow */
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1875rem;             /* 19px body */
  line-height: var(--leading-normal);
  color: var(--cream-soft);
  background: var(--bg-1);
  position: relative;
  overflow-x: hidden;
}

/* Brand atmosphere: a temperature glow bled from top (cyan → warm), plus faint
   grain. Cyan/blue lead, a whisper of orange warmth. Decorative, fixed. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 82% -8%, rgba(43,181,232,0.16), transparent 60%),
    radial-gradient(90% 55% at 8% 2%, rgba(28,117,188,0.14), transparent 58%),
    radial-gradient(80% 50% at 96% 8%, rgba(247,147,30,0.07), transparent 55%);
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
main, .footer, .nav-wrap { position: relative; z-index: 1; }

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

h1,h2,h3 { font-family: var(--font-display); color: var(--cream); margin: 0; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.mono { font-family: var(--font-mono); }

/* MSCV white wordmark sits naturally on the dark brand stage · pure white,
   no tint, now that cyan/blue/orange carry the identity around it. */
.brand-logo {
  filter: none;
}

/* Hexagon logo "pill" · the brand core mark; carries the native cyan→orange
   temperature gradient, so it re-anchors the warm accent wherever it appears.
   A soft dual glow (cool + warm) lets it sit richly on the dark stage. */
.brand-pill {
  height: 34px; width: auto; flex: none;
  filter: drop-shadow(0 2px 6px rgba(43,181,232,0.32)) drop-shadow(0 3px 10px rgba(247,147,30,0.18));
}
.nav-logo { gap: 10px; }
.drawer-lockup, .footer-lockup { display: inline-flex; align-items: center; gap: 12px; }
.footer-pill { height: 38px; width: auto; }
.footer-lockup { margin-bottom: var(--space-4); }
.footer-lockup .footer-wordmark { margin-bottom: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-8); }
@media (max-width: 768px){ .container { padding-inline: var(--space-6); } }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--cream); color: var(--on-fill);
  padding: 12px 18px; border-radius: 0 0 var(--radius-md) 0;
  box-shadow: var(--shadow-md); font-family: var(--font-body); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---- section rhythm + alternating warm bands + hairline seams ---- */
main > section { padding-block: var(--section-y); background: var(--bg-1); position: relative; }
main > section:nth-of-type(even) { background: var(--bg-2); }
main > section + section { border-top: 1px solid var(--hair); }

/* TEMPERATURE SEAM (B-1): a recurring cool→warm gradient rule seated on the top
   edge of each section, so the signature spectrum is woven the whole way down
   the page (not just the hero). Warmth grows as you descend via --seam-warm,
   set per-section below, giving orange a real gradient presence downward while
   blue still leads. Purely decorative; sits over the plain hairline. */
main > section + section::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  pointer-events: none; z-index: 2; opacity: 0.9;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--mscv-cyan) 12%,
    var(--mscv-blue-deep) 44%,
    color-mix(in srgb, var(--mscv-orange) var(--seam-warm, 40%), var(--mscv-blue-deep)) 78%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* warmth deepens down the page: each successive section pushes the seam's
   warm-end further toward full orange (the "extend the orange downward" note). */
.urgence       { --seam-warm: 30%; }
.engagements   { --seam-warm: 42%; }
.services      { --seam-warm: 54%; }
.atelier       { --seam-warm: 64%; }
.realisations  { --seam-warm: 72%; }
.proof         { --seam-warm: 80%; }
.temoignage    { --seam-warm: 88%; }
.regies        { --seam-warm: 96%; }
.zones         { --seam-warm: 100%; }
.contact       { --seam-warm: 100%; }

/* ============================ SHARED PARTS ============================ */
.eyebrow { margin-bottom: var(--space-4); }
.eyebrow-txt {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--copper-bright);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair-strong);
}
.section-h2 { font-size: var(--text-3xl); font-weight: 700; max-width: 24ch; color: var(--cream); }
@media (min-width: 900px){ .section-h2 { font-size: var(--text-4xl); } }
.section-sub {
  font-size: 1.375rem; color: var(--cream-soft);
  max-width: 60ch; margin-top: var(--space-4);
}
.copper-txt { color: var(--copper-bright); }

.link {
  color: var(--copper-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link:hover { border-bottom-color: currentColor; color: var(--brass-light); }
.link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--brass-light); border-radius: 4px; }
.link.arrow::after { content: " →"; white-space: nowrap; }
.copper-link { color: var(--copper-bright); }

.star { color: var(--brass-light); }
.chk { color: var(--copper-bright); font-weight: 700; margin-right: 2px; }
.sep { color: var(--copper); margin-inline: 8px; }

/* ---- buttons (max 2 visible) · CTA system on dark ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  padding: 14px 26px; min-height: 48px; border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  line-height: 1.1;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 6px var(--brass-light); }
/* PRIMARY = RED action fill, cream ink (Devis / main action · the single
   action colour, per the live site's red-only CTA rule) · #FAF9F6 on #C42727 = 5.9:1 */
.btn-primary { background: var(--action); color: var(--cream); box-shadow: var(--glow-ember); }
.btn-primary:hover { background: #D63636; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(196,39,39,0.46); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
/* GHOST = cyan outline + cyan text on dark (secondary / phone · keeps blue present) */
.btn-ghost { background: transparent; color: var(--accent-bright); border: 1.5px solid var(--accent); }
.btn-ghost:hover { background: rgba(43,181,232,0.12); border-color: var(--accent-bright); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }
/* CREAM = cream fill, dark ink (high-contrast Devis on sticky/contrast wells) · 14.4:1 */
.btn-cream { background: var(--cream); color: var(--on-fill); box-shadow: var(--shadow-md); }
.btn-cream:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* EMBER = RED action fill, cream ink (emergency Appeler) · 5.9:1 */
.btn-ember { background: var(--action); color: var(--cream); box-shadow: var(--glow-ember); }
.btn-ember:hover { background: #D63636; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(196,39,39,0.44); }
.btn-ember:active { transform: translateY(0); }
.btn-block { width: 100%; }
.ico-phone { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn-ghost .ico-phone { fill: var(--copper-bright); }
.nav-phone-num .ico-phone { fill: var(--copper-bright); }

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

/* ---- photo treatment (NEUTRAL grade for dark · no warm cast; cool cyan wash) ---- */
.photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; margin: 0; background: var(--bg-0); }
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.04) brightness(0.9) contrast(1.06);
}
/* cool cyan glow wash + darken-to-charcoal edges so photos sit in the dark world */
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(18,19,22,0) 55%, rgba(18,19,22,0.55) 100%),
    linear-gradient(0deg, rgba(43,181,232,0.12), rgba(43,181,232,0.03));
  mix-blend-mode: normal;
}
/* brass corner ticks · featured frames only */
figure.photo-ticks::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(var(--brass-light),var(--brass-light)) 12px 12px / 16px 1.5px no-repeat,
    linear-gradient(var(--brass-light),var(--brass-light)) 12px 12px / 1.5px 16px no-repeat,
    linear-gradient(var(--brass-light),var(--brass-light)) right 12px top 12px / 16px 1.5px no-repeat,
    linear-gradient(var(--brass-light),var(--brass-light)) right 12px top 12px / 1.5px 16px no-repeat;
}

/* ---- caption chip (hand-set, neutral charcoal) ---- */
.caption-chip {
  display: inline-block;
  background: rgba(18,19,22,0.86);
  color: var(--cream);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--card-inset);
  line-height: 1.3;
  backdrop-filter: blur(3px);
}

/* ---- wax-seal maker's mark (brass on dark) ---- */
.seal { display: block; width: 66px; height: 66px; }
.seal svg { width: 100%; height: 100%; overflow: visible; }
.seal .seal-ring-out, .seal .seal-ring-in { fill: none; stroke: var(--brass-light); }
.seal .seal-ring-out { stroke-width: 1.2; }
.seal .seal-ring-in { stroke-width: 0.6; opacity: 0.6; }
.seal .seal-text { fill: var(--brass-light); font-family: var(--font-mono); font-size: 8.2px; letter-spacing: 1.2px; }
.seal .seal-hex { fill: none; stroke: var(--brass-light); stroke-width: 1.4; }

/* ---- craft index (glowing copper numeral) ---- */
.craft-index {
  display: block; font-size: var(--text-3xl); font-weight: 700;
  color: var(--copper-bright); line-height: 1; margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

/* ============================ NAV ============================ */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-6);
  max-width: 1120px; margin: 20px auto 0; padding: 10px 12px 10px 24px;
  background: rgba(23,24,27,0.82); backdrop-filter: blur(14px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hair-strong);
  transition: max-width var(--dur-base) var(--ease-out), margin-top var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav.docked { max-width: var(--container); margin-top: 12px; background: rgba(18,19,22,0.92); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--hair-strong); }
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 32px; width: auto; }
.nav-links { display: flex; gap: var(--space-6); margin-left: auto; }
.nav-links a {
  font-family: var(--font-body); font-size: 1.0625rem; color: var(--cream-soft);
  text-decoration: none; padding: 8px 2px; position: relative;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--cream); border-bottom-color: var(--copper-bright); }
.nav-links a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brass-light); border-radius: 4px; }
.nav-cta { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.nav-phone { display: flex; flex-direction: column; line-height: 1.15; }
.nav-phone-label { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper-bright); }
.nav-phone-num { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; color: var(--cream); text-decoration: none; }
.nav-phone-num:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brass-light); border-radius: 6px; }
.nav-btn { padding: 10px 20px; min-height: 44px; font-size: 1rem; }
.nav-regie-link {
  pointer-events: auto; display: block; width: max-content;
  max-width: 1120px; margin: 8px auto 0; padding-left: 24px;
  font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--copper-bright); text-decoration: none;
}
.nav-regie-link:hover { text-decoration: underline; color: var(--brass-light); }

.mobile-urg-chip { display: none; }
.hamburger { display: none; }

/* ============================ DRAWER ============================ */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg-0);
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out);
  padding: var(--space-6); flex-direction: column; display: flex;
  visibility: hidden;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head img { height: 32px; }
.drawer-close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--cream); cursor: pointer; width: 44px; height: 44px; }
.drawer-close:focus-visible { outline: 2px solid var(--brass-light); border-radius: 6px; }
.drawer-links { margin: var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.drawer-links a { font-family: var(--font-display); font-size: 1.375rem; color: var(--cream); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--hair); min-height: 44px; }
.drawer-links a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brass-light); border-radius: 6px; }
.drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.drawer-regie { color: var(--copper-bright); text-decoration: none; font-size: 1rem; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.drawer-urg { color: var(--ember); font-weight: 700; text-decoration: none; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }

/* ============================ HERO (cinematic stage) ============================ */
.hero { padding-top: 150px; position: relative; overflow: hidden; background: var(--bg-1) !important; }
/* SIGNATURE: the temperature spectrum (cyan→blue→orange) as the hero top rule */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 138px; height: 2px;
  background: var(--grad-temperature); z-index: 3;
  box-shadow: 0 0 22px rgba(247,147,30,0.22), 0 0 20px rgba(43,181,232,0.28);
}
.ghost-wordmark {
  position: absolute; left: -0.06em; bottom: -0.14em; z-index: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(120px, 22vw, 300px); letter-spacing: -0.03em;
  color: var(--copper); opacity: 0.09; line-height: 0.8;
  pointer-events: none; user-select: none;
}

/* --- Full-bleed cinematic stage: van in front of the palace hotel --- */
.hero-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-stage-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 68%;
  /* premium grade: let the branded van + prestige building READ. Cool-lean
     but bright and saturated enough to look expensive, not murky stock. */
  filter: saturate(0.86) contrast(1.06) brightness(0.9);
}
/* Focused text-side gradient (NOT a blanket scrim): a deep well anchored on the
   LEFT third where the copy sits, easing to near-clear over the van/building so
   the image reads premium. A soft bottom fade seats it into the page, plus a
   whisper of brand-blue + forge-warm so the dark treatment carries the identity. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(15,17,22,0.86) 0%, rgba(15,17,22,0.72) 30%, rgba(15,17,22,0.42) 52%, rgba(15,17,22,0.20) 72%, rgba(15,17,22,0.06) 100%),
    linear-gradient(180deg, rgba(18,19,22,0.30) 0%, rgba(18,19,22,0) 34%, rgba(18,19,22,0.18) 74%, var(--bg-1) 100%),
    radial-gradient(78% 58% at 90% 14%, rgba(247,147,30,0.09), transparent 60%),
    radial-gradient(64% 52% at 4% 10%, rgba(28,117,188,0.26), transparent 62%);
}
/* Recurring pill motif · a large watermark of the hexagon mark on the stage */
.hero-pill-watermark {
  position: absolute; right: 3%; top: 46%; transform: translateY(-50%);
  z-index: 2; pointer-events: none; opacity: 0.16;
  filter: drop-shadow(0 10px 40px rgba(247,147,30,0.25));
}
.hero-pill-watermark img { width: clamp(180px, 24vw, 360px); height: auto; }

.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 60fr 40fr; gap: var(--space-16); align-items: center; }
.hero-title {
  font-size: var(--text-6xl); font-weight: 700; max-width: 15ch;
  margin-bottom: var(--space-6); color: var(--cream);
  letter-spacing: -0.03em; line-height: 1.02;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
/* temperature hairline under the eyebrow · warmth returns as a rule detail */
.hero-copy .eyebrow-txt { border-image: var(--grad-temperature) 1; border-bottom: 2px solid; border-image-slice: 1; }
.hero-sub { font-size: 1.375rem; color: var(--cream-soft); max-width: 46ch; margin-bottom: var(--space-8); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.cta-block { display: flex; flex-direction: column; gap: 8px; }
.cta-micro { font-size: 0.9375rem; color: var(--cream-dim); }
/* urgency microcopy stays cyan (informational text is never orange · orange is
   reserved for heat/gradient/icon per the direction's colour discipline) */
.cta-micro.copper-txt { color: var(--accent-bright); }

/* Google trust chip in the hero (paper chip holds the 4-colour mark on dark) */
.hero-google {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: var(--space-8); padding: 10px 16px 10px 10px;
  background: rgba(18,19,22,0.72); backdrop-filter: blur(6px);
  border: 1px solid var(--hair); border-radius: var(--radius-pill);
  text-decoration: none; box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hero-google:hover { transform: translateY(-2px); border-color: var(--hair-strong); box-shadow: var(--shadow-lg); }
.hero-google:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--brass-light); }
.g-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  background: #FFFFFF; border-radius: 50%; box-shadow: var(--shadow-sm);
}
.g-chip .g-mark { width: 18px; height: 18px; }
.g-chip-sm { width: 22px; height: 22px; }
.g-chip-sm .g-mark { width: 13px; height: 13px; }
.g-stars { color: var(--cream); font-size: 1rem; letter-spacing: 2px; }
.g-txt { font-size: 0.9375rem; color: var(--cream-soft); }
.g-txt strong { color: var(--cream); }

.hero-media { position: relative; align-self: center; }

/* Hero credential card · real content for the 40% right column */
.hero-cred {
  background: rgba(23,24,27,0.78); backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hair-strong);
  padding: var(--space-6) var(--space-6) var(--space-4);
  max-width: 380px; margin-left: auto;
}
.hero-cred-head { display: flex; align-items: center; gap: 12px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--hair); }
.hero-cred-rating { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.hero-cred-rating strong { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--cream); line-height: 1; letter-spacing: -0.02em; }
/* stars stay CREAM (orange reserved for heat/gradient/icon, never informational text) */
.hero-cred-stars { color: var(--cream); font-size: 1rem; letter-spacing: 2px; }
.hero-cred-src { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-dim); }
.hero-cred-list { display: grid; gap: 10px; margin: var(--space-4) 0; }
.hero-cred-list li { display: flex; align-items: baseline; gap: 10px; font-size: 1.0625rem; color: var(--cream-soft); }
.hero-cred-num { flex: none; min-width: 4.4em; font-family: var(--font-display); font-weight: 700; color: var(--accent-bright); letter-spacing: -0.01em; }
.hero-cred-foot { display: flex; align-items: center; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--hair); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-dim); }
.seal-mini { width: 42px; height: 42px; flex: none; }

.hero-trustline { position: relative; z-index: 3; margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--hair); }
.trustline { font-size: 1.0625rem; color: var(--cream-soft); display: flex; flex-wrap: wrap; align-items: center; }
.hero-regie-band { margin-top: var(--space-6); max-width: 70ch; color: var(--cream-dim); font-size: 1.0625rem; }

/* ============================ URGENCE ============================ */
.urgence { background: var(--bg-0) !important; }
.urgence-inner {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-8);
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
  border-radius: 2px;
}
.urgence-body { flex: 1; }
.urgence-body p { font-size: 1.25rem; color: var(--cream-soft); max-width: 74ch; }
.urgence-body p .link { color: var(--action-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.urgence-tags { margin-top: var(--space-3); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper-bright); display: flex; flex-wrap: wrap; align-items: center; }
.urgence-tags .sep { color: var(--copper); }
.urgence-cta { flex: none; }

/* ============================ ENGAGEMENTS ============================ */
.eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--space-12); }
.eng-item { padding: var(--space-6) var(--space-8); }
.eng-item + .eng-item { border-left: 1px solid var(--hair); }
.eng-item h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); color: var(--cream); }
.eng-item p { font-size: 1.0625rem; color: var(--cream-soft); }
.reassure-line {
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--hair);
  font-size: 1.0625rem; color: var(--cream-soft);
}
.reassure-line li { display: flex; align-items: center; gap: 6px; }

/* ============================ SERVICES · CRAFT CATALOGUE ============================ */
.svc-feature {
  display: grid; grid-template-columns: 45fr 55fr; gap: var(--space-12);
  align-items: center; margin-top: var(--space-16);
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--card-inset); padding: var(--space-8);
}
.svc-feature-media { aspect-ratio: 4/3; box-shadow: var(--shadow-sm); }
.svc-title { font-size: var(--text-xl); font-weight: 600; color: var(--cream); margin-bottom: var(--space-3); line-height: 1.25; }
.svc-poetic { color: var(--copper-bright); font-weight: 400; font-style: italic; }
/* temperature-tinted separator between the service name and its poetic line */
.svc-sep { color: var(--warm-bright); font-weight: 700; padding: 0 2px; }
.svc-benefit { font-size: 1.125rem; color: var(--cream-soft); margin-bottom: var(--space-4); }
.svc-details { display: grid; gap: 8px; margin-bottom: var(--space-6); }
.svc-details li { display: flex; align-items: flex-start; gap: 8px; font-size: 1.0625rem; color: var(--cream-soft); }
.svc-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }

.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-8); }
.svc-card {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--card-inset); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), var(--card-inset-hi); }
.svc-card:focus-within { box-shadow: 0 0 0 2px var(--brass-light), var(--card-inset-hi); }
.svc-card-media { aspect-ratio: 16/10; border-radius: 0; }
.svc-card:hover .svc-card-media img { transform: scale(1.04); }
.svc-card-media img { transition: transform var(--dur-slow) var(--ease-out); }
.svc-card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }

/* ============================ ATELIER (material-wash #1) ============================ */
/* Wash sections read as a distinct MATERIAL band: lighter charcoal + a faint
   brushed sheen + inset hairlines top/bottom, so they don't blur into bg-1. */
.atelier, .temoignage { position: relative; }
.atelier { background: var(--craft-wash) !important; box-shadow: inset 0 1px 0 var(--hair-cream), inset 0 -1px 0 var(--hair-cream); }
.atelier::before, .temoignage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 22%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 7px);
}
.atelier > .container, .temoignage > .container { position: relative; z-index: 1; }
.atelier-grid { display: grid; grid-template-columns: 44fr 50fr; gap: var(--space-16); align-items: center; }
.atelier-media figure { box-shadow: var(--shadow-md), var(--card-inset); aspect-ratio: 4/5; }
@media (max-width: 1024px){ .atelier-media figure { aspect-ratio: 16/10; } }
.atelier-media .caption-chip { margin-top: var(--space-4); }
.artisans-accent { position: relative; color: var(--brass-light); }
.artisans-accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--copper-bright); border-radius: 2px;
}
.atelier-body { font-size: 1.25rem; color: var(--cream-soft); max-width: 62ch; margin-top: var(--space-6); }
.atelier-creds { display: grid; gap: 0; margin-top: var(--space-8); border-top: 1px solid var(--hair); }
.atelier-creds li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--hair); }
.atelier-cred-k { flex: none; min-width: 11ch; font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-bright); }
.atelier-cred-v { font-size: 1.0625rem; color: var(--cream-soft); }
.atelier-motto { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--cream); margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 3px solid; border-image: var(--grad-temperature) 1; }
.atelier-copy .link { margin-top: var(--space-2); display: inline-block; }

/* ============================ RÉALISATIONS ============================ */
.gallery { columns: 3; column-gap: var(--space-6); margin-top: var(--space-12); }
.gtile { position: relative; margin: 0 0 var(--space-6); break-inside: avoid; box-shadow: var(--shadow-md), var(--card-inset); aspect-ratio: 4/3; }
.gtile-tall { aspect-ratio: 3/4; }
.gtile .caption-chip { position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px); }

/* ============================ PROOF ============================ */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.proof-body { font-size: 1.25rem; color: var(--cream-soft); max-width: 62ch; margin-top: var(--space-4); }
.guarantees { margin-top: var(--space-8); display: grid; gap: 10px; padding-top: var(--space-6); border-top: 1px solid var(--hair); }
.guarantees li { display: flex; align-items: flex-start; gap: 8px; font-size: 1.0625rem; color: var(--cream-soft); }
.values { display: grid; gap: var(--space-4); }
.value-chip {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--card-inset); padding: var(--space-6);
  position: relative;
}
.value-dot { position: absolute; top: var(--space-6); left: var(--space-6); width: 8px; height: 8px; border-radius: 50%; background: var(--copper-bright); box-shadow: 0 0 8px rgba(43,181,232,0.65); }
/* the three values walk the temperature spectrum (cool → warm) so orange is
   present here too, as a deliberate accent progression (B-1). */
.value-chip:nth-child(2) .value-dot { background: #C79A66; box-shadow: 0 0 8px rgba(199,154,102,0.6); }
.value-chip:nth-child(3) .value-dot { background: var(--warm-bright); box-shadow: 0 0 9px rgba(251,176,64,0.6); }
.value-chip h3 { font-size: 1.125rem; font-weight: 700; color: var(--cream); margin: 0 0 4px 20px; }
.value-chip p { font-size: 1.0625rem; color: var(--cream-soft); margin-left: 20px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
/* stat underlines walk the temperature spectrum (cool → warm) so the proof
   block also carries the orange-gradient signature (B-1), not a flat blue rule. */
.stat { padding-bottom: var(--space-3); border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--mscv-cyan), var(--mscv-blue-deep)) 1; }
.stat:nth-child(2) { border-image: linear-gradient(90deg, var(--mscv-blue-deep), #C79A66) 1; }
.stat:nth-child(3) { border-image: linear-gradient(90deg, #C79A66, var(--warm)) 1; }
.stat:nth-child(4) { border-image: linear-gradient(90deg, var(--warm), var(--warm-bright)) 1; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-5xl); color: var(--cream); line-height: 1; letter-spacing: -0.02em; }
.stat-num .star { color: var(--warm-bright); }
.stat-lbl { display: block; font-size: 1rem; color: var(--cream-dim); margin-top: var(--space-2); }

/* ============================ TÉMOIGNAGE (material-wash #2) ============================ */
.temoignage { background: var(--craft-wash) !important; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 var(--hair-cream), inset 0 -1px 0 var(--hair-cream); }
.ghost-temo { top: 50%; left: 50%; transform: translate(-50%,-50%); bottom: auto; opacity: 0.08; color: var(--warm); }
.temo-inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.temp-ribbon { display: block; width: 160px; height: 4px; border-radius: var(--radius-pill); background: var(--grad-temperature); box-shadow: 0 0 18px rgba(43,181,232,0.35); margin: var(--space-3) 0 var(--space-6); }

/* « Avis Google » badge · real 4,6/5 rating chip */
.temo-badge {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin: var(--space-4) auto 0; padding: 10px 18px;
  background: rgba(18,19,22,0.6); border: 1px solid var(--hair);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
}
.temo-badge-rating { display: inline-flex; align-items: baseline; gap: 8px; }
.temo-badge-rating strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--cream); line-height: 1; }
.temo-badge-stars { color: var(--warm-bright); font-size: 1rem; letter-spacing: 2px; }
.temo-badge-src { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-dim); }

/* FEATURED review · the hero testimonial (B's midnight-emergency soul) */
.temo-featured {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--card-inset);
  padding: var(--space-12) var(--space-8) var(--space-8);
  margin: var(--space-8) auto 0; max-width: 760px; width: 100%;
  position: relative; text-align: left;
}
/* temperature-gradient top accent on the featured card (B-1 orange presence) */
.temo-featured::before {
  content: ""; position: absolute; left: var(--space-8); right: var(--space-8); top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--grad-temperature); opacity: 0.9;
}
.temo-quote-glyph { position: absolute; top: 14px; right: 28px; font-family: var(--font-display); font-size: 5rem; color: var(--warm); opacity: 0.4; line-height: 1; pointer-events: none; }
.temo-quote { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--cream); margin: var(--space-3) 0 0; line-height: 1.32; }
@media (min-width: 900px){ .temo-quote { font-size: var(--text-3xl); } }
.temo-stars { color: var(--warm-bright); font-size: 1.15rem; letter-spacing: 3px; }
.temo-stars-sm { font-size: 1rem; letter-spacing: 2px; margin-bottom: var(--space-3); }
.temo-author { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-6); }
.temo-author-name { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 1.125rem; }
.temo-author-meta { font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-dim); }

/* GRID of the remaining real reviews · a proper SET, not a lone card */
.temo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin-top: var(--space-8); text-align: left; width: 100%;
}
.temo-item {
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--card-inset);
  padding: var(--space-6); display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.temo-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--card-inset-hi); }
.temo-item blockquote { margin: 0; font-size: 1.0625rem; color: var(--cream-soft); line-height: 1.5; }
.temo-item-author { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hair); }

.temo-cred { font-size: 1.125rem; color: var(--cream-soft); margin-top: var(--space-8); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.temo-cta { margin-top: var(--space-8); }

/* ============================ B2B · PARTENAIRE PREMIUM ============================ */
.regies { position: relative; overflow: hidden; background: var(--bg-0) !important; }
/* deep brand-blue → forge-warm atmosphere so the B2B block reads as its own
   premium stage, distinct from the surrounding sections */
.regies::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 88% 4%, rgba(28,117,188,0.18), transparent 60%),
    radial-gradient(64% 58% at 6% 96%, rgba(247,147,30,0.18), transparent 62%),
    radial-gradient(40% 44% at 96% 92%, rgba(251,176,64,0.10), transparent 60%);
}
.regies .container { position: relative; z-index: 1; }
.regies-pill-watermark { position: absolute; right: -80px; top: 40px; z-index: 0; opacity: 0.06; pointer-events: none; filter: drop-shadow(0 12px 46px rgba(247,147,30,0.28)); }
.regies-pill-watermark img { width: clamp(240px, 34vw, 420px); height: auto; }
.regies-head { max-width: 62ch; }
/* B2B eyebrow: cyan text (informational, never orange), but the temperature
   gradient survives as the underline rule · heat stays a decorative accent. */
.eyebrow-b2b { color: var(--accent-bright); border-image: var(--grad-temperature) 1; border-bottom: 1px solid; border-image-slice: 1; }
.regies-h2 { max-width: 20ch; }
.regies-lede { font-size: 1.375rem; color: var(--cream-soft); max-width: 66ch; margin-top: var(--space-6); }

.b2b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-16); }
/* TEMPERATURE SYSTEM (B-2 / B-3 / CC-2): the six cards form ONE deliberate
   cool→warm progression (cyan → blue → amber → orange), not "one orange, five
   cyan". Every card carries the SAME gradient left-accent bar (unified border),
   and its icon tile + number take the card's own point on the spectrum via --tc.
   Warmth grows downward across the set, echoing the hero temperature rule and
   adding the "more orange, as gradient" presence Roni asked for (B-1). */
.b2b-card {
  --tc: var(--accent-bright);            /* per-card temperature colour */
  --tc-bg: rgba(43,181,232,0.14);        /* per-card icon-tile tint */
  position: relative; background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hair-strong);
  padding: var(--space-8) var(--space-6) var(--space-6);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* unified temperature-gradient left-accent on ALL six cards (B-3). Each card
   shows the slice of the spectrum around its own --tc, so the whole column reads
   as a single gradient stepping cool→warm from card 01 to card 06. */
.b2b-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, transparent), var(--tc));
}
.b2b-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--tc); }
/* card-by-card temperature walk (cyan → blue → amber → orange) */
.b2b-card:nth-child(1) { --tc: #2BB5E8; --tc-bg: rgba(43,181,232,0.15); }
.b2b-card:nth-child(2) { --tc: #3FA6DE; --tc-bg: rgba(63,166,222,0.15); }
.b2b-card:nth-child(3) { --tc: #5C97CE; --tc-bg: rgba(92,151,206,0.15); }
.b2b-card:nth-child(4) { --tc: #C79A66; --tc-bg: rgba(199,154,102,0.16); }
.b2b-card:nth-child(5) { --tc: #F0A63E; --tc-bg: rgba(240,166,62,0.16); }
.b2b-card:nth-child(6) { --tc: #FBB040; --tc-bg: rgba(251,176,64,0.18); }
.b2b-index { position: absolute; top: var(--space-6); right: var(--space-6); font-size: var(--text-lg); font-weight: 700; color: var(--tc); opacity: 0.65; }
.b2b-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--tc-bg); color: var(--tc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.b2b-card:hover .b2b-ico { transform: translateY(-2px); }
.b2b-ico svg { width: 24px; height: 24px; }
.b2b-card h3 { font-size: 1.1875rem; font-weight: 700; color: var(--cream); margin-bottom: var(--space-3); line-height: 1.25; }
.b2b-card p { font-size: 1.0625rem; color: var(--cream-soft); }

.b2b-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-12) var(--space-8);
  background: var(--bg-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.b2b-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-temperature); }
.b2b-band-copy { max-width: 52ch; }
.b2b-band-title { font-size: var(--text-2xl); font-weight: 700; color: var(--cream); margin-bottom: var(--space-2); }
.b2b-band-copy p { font-size: 1.1875rem; color: var(--cream-soft); }
/* real régie proof point (Benoît Decurtins) · verbatim Google review */
.b2b-proof { display: flex; flex-direction: column; gap: 4px; margin: var(--space-6) 0 0; padding-left: var(--space-6); border-left: 3px solid; border-image: linear-gradient(180deg, var(--mscv-blue-deep), var(--warm)) 1; }
.b2b-proof-stars { color: var(--warm-bright); font-size: 1rem; letter-spacing: 2px; }
.b2b-proof-text { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--cream); line-height: 1.35; }
.b2b-proof-author { font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-dim); }
.b2b-band-cta { display: flex; flex-direction: column; gap: var(--space-3); flex: none; }
.confirm-chip { display: inline-block; margin-top: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--cream-dim); background: rgba(239,231,220,0.06); padding: 6px 12px; border-radius: var(--radius-sm); }

/* ============================ ZONES ============================ */
.zones-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); align-items: center; margin-top: var(--space-12); }
.zones-map { margin: 0; position: relative; }
/* dark-theme the shared service-area map (per INTEGRATION.md theming contract).
   Warm connectors return via --sam-grad-warm; served pins stay brand cyan. */
.zones-map .sam-map {
  width: 100%; height: auto; display: block;
  --sam-field:       rgba(43,181,232,0.06);
  --sam-field-line:  rgba(43,181,232,0.22);
  --sam-accent:      #2BB5E8;   /* served pins · bright cyan on dark */
  --sam-hq:          #E26F6F;   /* Matran base · brand red, legible on dark */
  --sam-reach:       #6E8B9E;   /* extended reach · muted steel */
  --sam-label:       #ECEDF0;
  --sam-label-hq:    #F3B3B3;
  --sam-surface:     #17181B;   /* pin inner dot reads on the dark pins */
  --sam-grad-cool:   #2BB5E8;
  --sam-grad-mid:    #1C75BC;
  --sam-grad-warm:   #F7931E;   /* WARM connector end · orange heat in the network */
  --sam-halo:        #17181B;   /* label halo (matches dark surface) so text reads over lines */
}
/* CC-1 · premium map polish: label halos (paint-order:stroke) so every label is
   legible over connectors and the field, plus a soft glow on the curved connectors. */
.zones-map .sam-label {
  paint-order: stroke;
  stroke: var(--sam-halo); stroke-width: 4px; stroke-linejoin: round;
}
.zones-map .sam-glow { stroke: url(#samLinkGlow); filter: url(#samSoftGlow); opacity: 0.5; }
.zones-map .sam-link, .zones-map .sam-glow { stroke-linecap: round; }
/* pin markers get a subtle temperature drop-glow so they read as designed, not dots */
.zones-map .sam-pins .sam-pin { filter: drop-shadow(0 0 5px rgba(43,181,232,0.5)); }
.zones-map .sam-hq { filter: drop-shadow(0 0 8px rgba(226,111,111,0.55)); }
.zones-map-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cream-dim);
}
.zones-map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg-hq { background: #E26F6F; }
.lg-served { background: #2BB5E8; }
.lg-reach { background: #6E8B9E; }
.zones-aside { align-self: start; }
.zones-body { font-size: 1.1875rem; color: var(--cream-soft); max-width: 80ch; }
.zone-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.zone-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; background: var(--bg-card); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm), var(--card-inset);
  font-size: 1.0625rem; color: var(--cream-soft);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.zone-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), var(--card-inset-hi); color: var(--cream); }
.zone-chip .pin { color: var(--copper-bright); font-size: 0.75rem; }
.zone-home { background: var(--copper); color: var(--on-fill); box-shadow: var(--glow-copper); }
.zone-home .pin { color: var(--on-fill); }
.zones-note { margin-top: var(--space-6); font-size: 1.0625rem; color: var(--cream-soft); }

/* ============================ CONTACT ============================ */
.contact-head-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.contact-head-sub { font-size: 1rem; color: var(--cream-soft); }
.contact-head-sub .link { color: var(--action-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin-top: var(--space-12); align-items: start; }
.phone-label { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper-bright); }
.phone-huge { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-5xl); color: var(--cream); text-decoration: none; line-height: 1; margin: var(--space-3) 0; letter-spacing: -0.02em; }
.phone-huge:hover { color: var(--brass-light); }
.phone-huge:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brass-light); border-radius: 8px; }
.phone-urg { font-size: 1.25rem; color: var(--cream-soft); }
.phone-urg .link { color: var(--action-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nap { font-style: normal; margin-top: var(--space-8); font-size: 1.0625rem; color: var(--cream-soft); }
.nap p { margin-bottom: 4px; }
.nap-name { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 1.25rem; }
.hours { margin-top: var(--space-8); }
.hours-title { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--copper-bright); margin-bottom: var(--space-3); }
.hours-table { border-top: 1px solid var(--hair); }
.hours-table > div { display: flex; justify-content: space-between; gap: var(--space-6); padding: 8px 0; border-bottom: 1px solid var(--hair); }
.hours-table dt { color: var(--cream-soft); }
.hours-table dd { color: var(--cream); margin: 0; font-weight: 600; }
.hours-urg { margin-top: var(--space-3); font-size: var(--text-sm); letter-spacing: 0.08em; color: var(--copper-bright); }
.socials { margin-top: var(--space-8); font-size: 1.0625rem; color: var(--cream-dim); }

.contact-form-wrap { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), var(--card-inset); padding: var(--space-8); }
.form-intro { font-size: 1.0625rem; color: var(--cream-soft); margin-bottom: var(--space-6); }
.field { margin-bottom: var(--space-4); display: flex; flex-direction: column; }
.field label { font-size: 1rem; color: var(--cream-soft); margin-bottom: 6px; }
.field .opt { color: var(--cream-dim); font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1.125rem; color: var(--cream);
  padding: 12px 14px; min-height: 48px; border: 1.5px solid var(--hair-strong);
  border-radius: var(--radius-md); background: var(--bg-0); width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--cream-dim); }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' fill='none' stroke='%232BB5E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; color: var(--cream); }
.field select option { background: var(--bg-0); color: var(--cream); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--copper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--copper-bright); box-shadow: 0 0 0 4px rgba(43,181,232,0.24); }
.field-err { display: none; color: var(--action-bright); font-size: 0.9375rem; margin-top: 6px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--action-bright); }
.field.invalid .field-err { display: block; }
.contact-form .btn-block { margin-top: var(--space-4); }

.form-success { display: none; text-align: center; padding: var(--space-12) var(--space-6); }
.form-success.show { display: block; }
.success-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(43,181,232,0.18); color: var(--copper-bright); font-size: 2rem; font-weight: 700; margin-bottom: var(--space-4); }
.form-success p { font-size: 1.125rem; color: var(--cream-soft); max-width: 46ch; margin-inline: auto; }
.form-success p .link { color: var(--action-bright); font-weight: 600; }

/* ============================ FOOTER ============================ */
.footer { background: var(--bg-0); color: var(--cream-soft); position: relative; overflow: hidden; padding-block: var(--space-24) var(--space-12); border-top: 1px solid var(--hair-strong); }
.footer .ghost-footer { color: var(--copper); opacity: 0.07; bottom: -0.16em; }
.footer .container { position: relative; z-index: 2; }
.seal-footer { margin: 0 auto var(--space-8); }
.seal-footer .seal-ring-out, .seal-footer .seal-ring-in, .seal-footer .seal-text, .seal-footer .seal-hex { stroke: var(--brass-light); }
.seal-footer .seal-text { fill: var(--brass-light); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-12); }
.footer-wordmark { height: 34px; width: auto; margin-bottom: var(--space-4); }
.footer-tagline { font-family: var(--font-display); font-size: 1.25rem; color: var(--cream); margin-bottom: var(--space-2); }
.footer-values { font-size: var(--text-sm); letter-spacing: 0.08em; color: var(--copper-bright); }
.footer-h { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--cream); margin-bottom: var(--space-4); }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--cream-soft); text-decoration: none; font-size: 1.0625rem; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--brass-light); }
.fidx { color: var(--copper-bright); font-size: var(--text-xs); }
.footer-contact address { font-style: normal; }
.footer-contact p { margin-bottom: 6px; }
.footer-contact a { display: inline; }
.footer-urg { display: block; margin: var(--space-12) 0 var(--space-8); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ember); text-decoration: none; }
.footer-urg:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--hair-cream); }
.footer-social a { color: var(--cream-soft); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer-social a:hover { color: var(--brass-light); }
.footer-copy { font-size: var(--text-sm); color: var(--cream-dim); }

/* ============================ STICKY MOBILE BAR ============================ */
.sticky-bar { display: none; }

/* ============================ MOTION (reveals) ============================ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); }
  .js .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
}

/* ---- Service-area map animation (staggered pins, HQ pulse, drawn links) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* pins seat into place, staggered by their --i index (material settle) */
  .js .zones-map.map-armed .sam-pin,
  .js .zones-map.map-armed .sam-hq {
    opacity: 0; transform: translateY(-10px) scale(0.85);
    transform-box: fill-box; transform-origin: center bottom;
  }
  .js .zones-map.map-in .sam-pin,
  .js .zones-map.map-in .sam-hq {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  /* connector links draw in from Matran */
  .js .zones-map.map-armed .sam-link { stroke-dasharray: 420; stroke-dashoffset: 420; }
  .js .zones-map.map-in .sam-link {
    stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease-out);
    transition-delay: 0.15s;
  }
  .js .zones-map.map-armed .sam-link--reach { stroke-dasharray: 2 8; stroke-dashoffset: 0; opacity: 0; }
  .js .zones-map.map-in .sam-link--reach { opacity: 0.7; transition: opacity 0.8s var(--ease-out) 0.6s; }
  /* HQ pulse ring · gentle, capped */
  .js .zones-map.map-in .sam-pulse {
    transform-box: fill-box; transform-origin: center;
    animation: samPulse 2.8s var(--ease-out) infinite;
  }
}
@keyframes samPulse {
  0%   { transform: scale(0.7); opacity: 0.5; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px){
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-media { display: none; }
  .hero-pill-watermark { opacity: 0.10; right: -4%; }
  .proof-grid, .contact-grid, .atelier-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .atelier-media { max-width: 560px; }
  .svc-feature { grid-template-columns: 1fr; }
  .gallery { columns: 2; }
  .b2b-grid { grid-template-columns: repeat(2, 1fr); }
  .temo-grid { grid-template-columns: repeat(2, 1fr); }
  .zones-layout { grid-template-columns: 1fr; gap: var(--space-12); }
  .zones-map { max-width: 620px; margin-inline: auto; }
}

@media (max-width: 768px){
  /* nav → mobile pill */
  .nav { max-width: none; margin: 12px var(--space-6) 0; padding: 8px 8px 8px 16px; gap: var(--space-3); min-height: 56px; }
  .nav.docked { margin: 8px var(--space-6) 0; }
  .nav-links, .nav-phone, .nav-btn, .nav-regie-link { display: none; }
  .nav-logo { min-height: 44px; }
  .nav-cta { margin-left: auto; gap: var(--space-2); }
  .mobile-urg-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px;
    background: var(--action); color: var(--cream); border-radius: var(--radius-pill);
    font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; text-decoration: none;
    box-shadow: var(--glow-ember);
  }
  .mobile-urg-chip .ico-phone { fill: var(--cream); width: 18px; height: 18px; }
  .mobile-urg-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brass-light); }
  .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 10px; }
  .hamburger span { display: block; height: 2px; background: var(--cream); border-radius: 2px; }
  .hamburger:focus-visible { outline: 2px solid var(--brass-light); border-radius: 8px; }

  .hero { padding-top: 108px; }
  .hero::before { top: 96px; }
  .ghost-wordmark { font-size: 90px; opacity: 0.07; }
  /* on mobile the stage sits behind a full-width vertical scrim (copy stacks over
     the whole image) · kept lighter than before so the van still reads, with a
     denser floor only where text sits, holding AA without going murky. */
  .hero-stage-img { object-position: 64% 62%; filter: saturate(0.82) contrast(1.05) brightness(0.74); }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(15,17,22,0.78) 0%, rgba(15,17,22,0.62) 40%, rgba(15,17,22,0.74) 72%, var(--bg-1) 100%),
      radial-gradient(70% 50% at 88% 10%, rgba(247,147,30,0.09), transparent 60%),
      radial-gradient(70% 50% at 6% 6%, rgba(28,117,188,0.24), transparent 62%);
  }
  .hero-pill-watermark { top: 20%; right: 4%; opacity: 0.12; }
  .hero-pill-watermark img { width: 130px; }
  .hero-title { font-size: var(--text-4xl); }
  .hero-sub { font-size: 1.25rem; }
  .hero-ctas { flex-direction: column; gap: var(--space-6); }
  .cta-block .btn { width: 100%; }
  .hero-google { width: 100%; }

  .b2b-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .b2b-band { flex-direction: column; align-items: stretch; padding: var(--space-8) var(--space-6); }
  .b2b-band-cta .btn { width: 100%; }

  /* Decorative B2B logo watermark: at right:-80px + 240px min-width it sits fully
     off the right edge on phones (rect right ≈ 400-494 > viewport), a real
     overflowing element masked only by body{overflow-x:hidden}. Pull it inside
     and shrink so nothing extends past the viewport on any phone. */
  .regies-pill-watermark { right: 8px; top: 16px; }
  .regies-pill-watermark img { width: 130px; }

  .section-h2 { font-size: var(--text-2xl); }
  .section-sub, .atelier-body, .proof-body, .regies-copy p, .urgence-body p, .contrat-frame p { font-size: 1.125rem; }
  body { font-size: 1.125rem; }

  .urgence-inner { flex-direction: column; align-items: stretch; padding: var(--space-6); }
  .urgence-cta { width: 100%; }

  .eng-grid { grid-template-columns: 1fr; }
  .eng-item { padding: var(--space-6) 0; }
  .eng-item + .eng-item { border-left: none; border-top: 1px solid var(--hair); }

  .svc-feature { padding: var(--space-6); gap: var(--space-6); }
  .svc-grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .gallery { columns: 1; }
  .gtile, .gtile-tall { aspect-ratio: 16/11; }

  .stats { gap: var(--space-4); }
  .stat-num { font-size: var(--text-4xl); }

  /* Map SVG labels shrink to ~7px on phones → illegible blob. Hide the SVG and
     let the pill list + zones copy carry the service area (per INTEGRATION.md). */
  .zones-map { display: none; }

  .temo-grid { grid-template-columns: 1fr; }
  .temo-featured { padding: var(--space-8) var(--space-6) var(--space-6); }
  .temo-featured::before { left: var(--space-6); right: var(--space-6); }
  .temo-quote-glyph { right: 16px; font-size: 3.5rem; }

  .dual-cta { flex-direction: column; }
  .dual-cta.text-cta { flex-direction: column; gap: var(--space-4); }
  .dual-cta .btn { width: 100%; }
  .contact-head-cta { flex-direction: column; align-items: stretch; }
  .contact-head-cta .btn { width: 100%; }
  .contact-head-sub { text-align: center; }

  .phone-huge { font-size: var(--text-4xl); }

  .footer { padding-block: var(--space-16) var(--space-12); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }

  /* WCAG 2.5.5 touch targets: standalone tappable links get ≥44px on phones.
     In-sentence prose links are left inline (2.5.8 inline exception). */
  .footer-col a { min-height: 44px; }
  .footer-contact address a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-social a { min-height: 44px; padding: 2px 0; }
  .dual-cta.text-cta .link,
  .contact-head-cta .link,
  .svc-links .link,
  .atelier-copy .link,
  .hero-regie-band .copper-link,
  .realisations .dual-cta .link { min-height: 44px; display: inline-flex; align-items: center; }
  .phone-huge { min-height: 44px; display: inline-flex; align-items: center; }

  /* Contact-section standalone contact methods (phone / email / social) are the
     primary tap actions for an emergency-service brand → ≥44px on phones.
     (In-sentence prose links keep the WCAG 2.5.8 inline exception.) */
  .nap .link,
  .socials .link { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-logo { min-width: 44px; }

  /* sticky mobile bar · dark warm */
  .sticky-bar {
    display: flex; gap: var(--space-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px var(--space-6) calc(10px + env(safe-area-inset-bottom));
    background: rgba(18,19,22,0.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--hair-strong);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
    transform: translateY(0); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .sticky-bar .btn-primary { background: var(--action); color: var(--cream); box-shadow: none; }
  .sticky-bar.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .sticky-btn { flex: 1; min-height: 48px; padding: 12px; font-size: 1rem; }
  main { padding-bottom: 76px; }
}

@media (max-width: 400px){
  .hero-title { font-size: var(--text-3xl); }
  .phone-huge { font-size: var(--text-3xl); }
  .nav-logo img { height: 28px; }
}

/* Narrow phones (≤380px): the nav logo WORDMARK (~119px) + urgence chip +
   hamburger overrun the pill (nav-cta rect right ≈ 356 > 320 viewport). Drop the
   wordmark to the hexagon pill only (the pill carries the brand mark; the full
   wordmark still shows in the drawer) and tighten margins/gaps so the row fits
   inside the viewport at 320. */
@media (max-width: 380px){
  .nav { margin-inline: 12px; padding: 8px 8px 8px 12px; gap: 8px; }
  .nav.docked { margin-inline: 12px; }
  .nav-logo .brand-logo { display: none; }
  .nav-cta { gap: 6px; }
  .mobile-urg-chip { padding: 10px 12px; }
}