/* ============================================================================
   MSCV SA · Direction A « Chez vous »
   WARM RESIDENTIAL EDITORIAL · a coffee-table magazine.
   Barely-warm off-white paper + near-black ink + MSCV BLUE lead accent +
   RED action (authentic to the original site's only CTA colour).
   On-brand recolour: blue leads, RED = the action/CTA colour, ORANGE reserved
   for the 24/24 emergency band + the signature temperature gradient (heat).
   Layout/type unchanged.
   ============================================================================ */

/* --- Fraunces (self-hosted in ./fonts/) ----------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/fraunces-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/fraunces-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/fraunces-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/fraunces-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Palette override · CHEZ VOUS (MSCV-on-brand, softened neutrals) ------ */
:root {
  /* Neutrals: pulled OFF cream toward a barely-warm off-white so the page
     reads closer to the original's clean white+charcoal, while keeping a
     whisper of warmth to preserve A's editorial distinctiveness. */
  --cream:        #FBFAF7;   /* barely-warm off-white paper (was #FAF7F2) */
  --cream-2:      #F3F1EC;   /* faint warm-grey alt sections (was #F1ECE4) */
  --cream-card:   #FFFFFF;   /* clean white raised surface (was #FFFDF9) */
  --ink:          #202020;   /* original charcoal near-black (was #17181B) */
  --ink-soft:     #383838;   /* AA body-safe on off-white (≈10.4:1) */
  --ink-muted:    #5C5C5C;   /* captions · AA on off-white (≈6.3:1) */

  /* LEAD accent = MSCV blue. `--clay*` names kept to avoid touching usages. */
  --clay:         #1C75BC;   /* MSCV blue-deep · text/border on light (AA ≈4.9:1) */
  --clay-fill:    #1C75BC;   /* blue button fills · white on it (AA ≈4.6:1) */
  --clay-deep:    #155A90;   /* hover / darker blue */
  --ochre:        #159BD7;   /* MSCV blue · decorative secondary accent */
  --ochre-soft:   #8FCDEB;   /* soft cyan-blue · on-dark hairline / italic */

  /* ACTION accent = RED (authentic to the original's only CTA colour). */
  --action:       #C42727;   /* MSCV/original red · white on it (AA ≈5.0:1) */
  --action-deep:  #A11F1F;   /* red hover (deeper) */
  --action-text:  #C42727;   /* red-as-text on light (AA ≈5.0:1) */

  /* URGENCE accent = MSCV orange · reserved for the 24/24 emergency band
     + heat iconography (permitted inside heat semantics by brand anchors). */
  --emergency:      #F7931E;   /* MSCV orange fill · pair with INK text */
  --emergency-deep: #DA7B0A;   /* orange hover */
  --emergency-text: #A85700;   /* orange-as-text on light (AA ≥4.6:1 on cream/cream-2) */

  /* WARM ACCENT · orange woven through the page as temperature/warmth (NOT a CTA).
     Used for section-marker dots, rule lines, hover warmth, iconography, map
     connectors. Blue LEADS; this is the "chez vous" warmth. Never a button fill. */
  --warm:           #F7931E;   /* pure warm end (fills/gradients only) */
  --warm-glow:      rgba(247,147,30,.16);  /* soft warm wash */
  --warm-hair:      rgba(247,147,30,.30);  /* warm hairline */

  /* Signature temperature gradient (cyan → blue → orange) · the logo hexagon. */
  --grad-temperature: linear-gradient(100deg, #2BB5E8 0%, #1C75BC 42%, #F7931E 100%);
  /* Compact dot gradient · the section marker (echoes the logo pill directly). */
  --grad-dot:         linear-gradient(135deg, #2BB5E8 0%, #1C75BC 46%, #F7931E 100%);
  /* Warm-tail rule: blue-led hairline that warms to orange on its right edge. */
  --grad-rule:        linear-gradient(90deg, #1C75BC 0%, #159BD7 40%, #F7931E 100%);

  --hair:         rgba(32,32,32,0.12);
  --hair-strong:  rgba(32,32,32,0.20);

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'Space Mono', ui-monospace, monospace;

  --page-x: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1240px;
  --sec-y: clamp(4rem, 8vw, 8rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--page-x); }
.section { padding-block: var(--sec-y); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--clay); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Rubric / dot markers (editorial) ----------------------------------- */
.rubric {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 1.25rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
/* Brand-gradient DOT · replaces the old N°01 numeral. Echoes the logo hexagon
   (cyan→blue→orange). A soft warm ring gives it the "chez vous" temperature. */
.rubric .dot {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  background: var(--grad-dot);
  box-shadow: 0 0 0 4px var(--warm-glow);
  position: relative; top: -.02em;
}
.rubric-light { color: rgba(250,247,242,.92); }
.rubric-light .dot { box-shadow: 0 0 0 4px rgba(247,147,30,.28); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1.1;
  min-height: 48px; padding: .85rem 1.4rem; border-radius: 2px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  text-align: center;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-lg { min-height: 56px; padding: 1rem 1.7rem; font-size: 1.06rem; }
.btn-block { display: flex; width: 100%; }

/* Primary filled CTA = RED action (authentic to original). Class name kept. */
.btn-clay { background: var(--action); color: #fff; box-shadow: 0 8px 22px rgba(196,39,39,.24); }
.btn-clay:hover { background: var(--action-deep); }
/* Secondary/structural = BLUE outline (brand lead), warm wash on hover. */
.btn-outline { background: transparent; color: #1A6FAF; border-color: var(--clay); transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.btn-outline:hover { background: var(--warm-glow); border-color: var(--warm); }
/* Emergency band CTA = orange (heat/urgency semantics only). */
.btn-emergency { background: var(--emergency); color: var(--ink); box-shadow: 0 8px 22px rgba(247,147,30,.28); }
.btn-emergency:hover { background: var(--emergency-deep); color: var(--ink); }
.btn-ghost-light { background: rgba(250,247,242,.1); color: #fff; border-color: rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: rgba(250,247,242,.2); }

/* Link-arrow: blue label, warm underline swipe on hover (the woven-orange touch). */
.link-arrow { color: var(--clay); font-weight: 600; text-decoration: none; position: relative; align-self: flex-start; padding-bottom: 2px; transition: color .2s var(--ease); }
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--grad-rule); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-urgent { color: var(--emergency-text); font-weight: 600; font-size: .92rem; text-decoration: none; }
.link-urgent:hover { text-decoration: underline; }

/* ============================= MASTHEAD ============================= */
.mast {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,242,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow .3s var(--ease);
}
.mast.scrolled { box-shadow: 0 6px 24px rgba(32,32,32,.08); }
.mast-inner {
  max-width: var(--maxw); margin-inline: auto; padding: .85rem var(--page-x);
  display: flex; align-items: center; gap: 1.5rem;
}
.mast-logo img { height: 30px; width: auto; }
.mast-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.mast-nav a {
  font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-soft);
  padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.mast-nav a:hover, .mast-nav a.active { color: var(--clay); border-color: var(--clay); }
.mast-actions { display: flex; align-items: center; gap: 1rem; }
.mast-phone { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.mast-phone-lbl { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--emergency-text); }
.mast-phone-num { font-weight: 700; color: var(--ink); font-size: .98rem; }
.mast-call-mobile { display: none; }
.mast-burger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; width: 48px; height: 48px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.mast-burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }

/* --- Drawer ------------------------------------------------------------ */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); z-index: 130;
  background: var(--cream); padding: 5.5rem 1.75rem 2rem; transform: translateX(100%);
  transition: transform .35s var(--ease); display: flex; flex-direction: column; gap: 2rem;
  box-shadow: -12px 0 40px rgba(32,32,32,.18); overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
/* Explicit close affordance · the thin scrim strip is a poor touch target. */
.drawer-close {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--ink); padding: 0; border-radius: 999px;
}
.drawer-close svg { width: 26px; height: 26px; }
.drawer-close:hover { background: var(--cream-2); }
.drawer-nav { display: flex; flex-direction: column; gap: .25rem; }
.drawer-nav a { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); text-decoration: none; padding: .6rem 0; border-bottom: 1px solid var(--hair); }
.drawer-nav a:active { color: var(--clay); }
.drawer-foot { display: flex; flex-direction: column; gap: .75rem; margin-top: auto; }
.drawer-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(32,32,32,.45); }

/* ============================= HERO ============================= */
.hero { position: relative; min-height: min(92vh, 820px); min-height: min(92dvh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(.72) sepia(.22) brightness(.92) contrast(1.02); }
.hero-scrim {
  position: absolute; inset: 0;
  /* Top stop nudged .15 -> .30 so the light rubric clears AA over the bright
     building area; mid/bottom keep the editorial depth. */
  background:
    linear-gradient(180deg, rgba(20,24,30,.30) 0%, rgba(20,24,30,.44) 45%, rgba(18,22,28,.86) 100%),
    linear-gradient(90deg, rgba(16,34,52,.5) 0%, rgba(16,34,52,0) 60%);
}
.hero-content { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; width: 100%; padding: 0 var(--page-x) clamp(2.5rem, 5vw, 4.5rem); }
.hero-title {
  color: #FDF9F3; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -0.02em;
  max-width: 16ch; margin-bottom: 1.5rem; text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--ochre-soft); }
.hero-lede { color: rgba(253,249,243,.9); font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 46ch; margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .9rem; }
.hero-cta-note { color: rgba(253,249,243,.78); font-size: .88rem; margin-bottom: 1.75rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(253,249,243,.28); }
.hero-trust li { color: rgba(253,249,243,.82); font-size: .92rem; }
.hero-trust strong { color: #fff; font-family: var(--font-serif); font-size: 1.35rem; display: block; }

/* --- Régies band · warm temperature seam on top (woven orange) ---------- */
.regie-band {
  position: relative; background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 1.1rem var(--page-x); text-align: center;
}
.regie-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-temperature); }
.regie-band p { margin: 0; font-size: .98rem; }
.regie-band .link-arrow { color: var(--ochre-soft); white-space: nowrap; }

/* ============================= URGENCE BAND ============================= */
.urgence { background: var(--emergency); color: var(--ink); }
.urgence-inner {
  max-width: var(--maxw); margin-inline: auto; padding: clamp(1.75rem,3vw,2.5rem) var(--page-x);
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between;
}
.urgence-text { flex: 1 1 460px; }
.urgence-title { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.urgence p { color: rgba(23,24,27,.88); margin: 0 0 1rem; max-width: 60ch; }
.pulse-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); flex: none; box-shadow: 0 0 0 0 rgba(23,24,27,.6); }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-row li { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; padding: .3rem .7rem; border: 1px solid rgba(23,24,27,.4); border-radius: 999px; color: var(--ink); }
.urgence .btn-emergency { background: var(--ink); color: var(--cream); box-shadow: 0 8px 22px rgba(23,24,27,.22); }
.urgence .btn-emergency:hover { background: var(--ink-soft); color: var(--cream); }

/* ============================= ENGAGEMENTS ============================= */
.sec-head { max-width: 44ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head-wide { max-width: 60ch; }
.sec-title { font-size: clamp(2rem, 4vw, 3.2rem); position: relative; }
/* Warm-tail hairline under section titles: blue-led, warming to orange (woven). */
.sec-title::after {
  content: ""; display: block; width: 84px; height: 3px; margin-top: 1.1rem;
  background: var(--grad-rule); border-radius: 3px;
}
.rubric-light + .sec-title::after, .temoin-head::after { background: linear-gradient(90deg, #2BB5E8 0%, #8FCDEB 45%, #F7931E 100%); }
.sec-lede { color: var(--ink-soft); font-size: 1.15rem; margin-top: 1.25rem; }

/* Signature temperature gradient · used ONCE, as the rule above the three
   engagements (cold problem → warm comfort, left to right). */
.engage-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); position: relative; padding-top: 2px; }
.engage-list::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-temperature); border-radius: 2px;
}
.engage-item { padding-top: 1.5rem; }
/* Editorial numerals tinted along the temperature spectrum: cool → mid → warm,
   left to right, matching the gradient rule above. Warmth arrives with "propre". */
.engage-num { font-family: var(--font-serif); font-size: 3.2rem; line-height: 1; display: block; margin-bottom: .5rem;
  background: var(--grad-dot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.engage-item:nth-child(1) .engage-num { background: linear-gradient(135deg, #2BB5E8, #159BD7); -webkit-background-clip: text; background-clip: text; }
.engage-item:nth-child(2) .engage-num { background: linear-gradient(135deg, #1C75BC, #155A90); -webkit-background-clip: text; background-clip: text; }
.engage-item:nth-child(3) .engage-num { background: linear-gradient(135deg, #F7931E, #DA7B0A); -webkit-background-clip: text; background-clip: text; }
.engage-item h3 { font-size: 1.55rem; margin-bottom: .6rem; }
.engage-item p { margin: 0; color: var(--ink-soft); }

.reassure-row {
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: clamp(2rem,4vw,3rem);
  padding: 1.25rem 1.5rem; background: var(--cream-2); border-radius: 4px; border-left: 3px solid var(--clay);
}
.reassure-row li { position: relative; padding-left: 1.4rem; font-weight: 500; color: var(--ink); }
.reassure-row li::before { content: "✓"; position: absolute; left: 0; color: var(--clay); font-weight: 700; }

.sec-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(2rem,4vw,3rem); justify-content: center; }
.sec-cta-left { justify-content: flex-start; }

/* ============================= SERVICES ============================= */
.services { background: var(--cream-2); }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); align-items: start; }
.svc {
  background: var(--cream-card); border: 1px solid var(--hair); border-radius: 4px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: .35rem;
  position: relative; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Warm-led top rule appears on hover · the temperature-spectrum accent, woven. */
.svc::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-rule); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(32,32,32,.09); border-color: var(--warm-hair); }
.svc:hover::before { transform: scaleX(1); }
.svc-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.svc-feature:hover { transform: none; }
.svc-media { margin: 0; }
.svc-media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; filter: saturate(.8) sepia(.12); }
.svc-feature .svc-body { padding: clamp(1.75rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
/* Feature card: the body is vertically centred and its CTA groups with the copy
   (no margin-top:auto stretch), so the taller image column no longer leaves a
   ~450px void beside a short body. */
.svc-feature .svc-cta { margin-top: 1.25rem; }
.svc-kicker { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin: 0; }
.svc-title { font-size: 1.65rem; margin: .15rem 0 .5rem; }
.svc-feature .svc-title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.svc-lede { color: var(--ink-soft); margin: 0 0 1rem; }
.svc-points { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 1.25rem; }
.svc-points li { position: relative; padding-left: 1.3rem; color: var(--ink-soft); font-size: .98rem; }
.svc-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--grad-dot); border-radius: 50%; }
.svc-cta { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

/* ============================= RÉALISATIONS ============================= */
/* Deliberate 3-column composition: two portrait "tall" tiles flank a centre column
   holding two stacked landscape tiles. Every cell is filled · no jagged empty band. */
.realis-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.25rem; min-height: 620px; }
.realis-item { margin: 0; position: relative; border-radius: 4px; overflow: hidden; background: var(--ink); }
.realis-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.realis-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.realis-item:nth-child(3) { grid-column: 2; grid-row: 2; }
.realis-item:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.realis-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) brightness(1) sepia(.08); transition: transform .6s var(--ease); }
.realis-item:hover img { transform: scale(1.05); }
.realis-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(20,22,26,.9));
  color: var(--cream); font-size: .82rem;
}
.cap-type { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: #fff; margin-bottom: .35rem; padding-top: .5rem; position: relative; }
.cap-type::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 2px; background: var(--grad-rule); border-radius: 2px; }

/* ============================= POURQUOI ============================= */
.pourquoi { background: var(--cream); }
.pourquoi-grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pourquoi-lead p { color: var(--ink-soft); }
.pull-quote {
  margin: 1.75rem 0; padding: .25rem 0 .25rem 1.5rem; position: relative;
  font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 2rem); font-style: italic; color: var(--ink); line-height: 1.25;
}
/* Temperature-spectrum quote bar (cool at top → warm at bottom) · woven orange. */
.pull-quote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #2BB5E8 0%, #1C75BC 55%, #F7931E 100%);
}
.values { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.values li { padding-bottom: .75rem; border-bottom: 1px solid var(--hair); color: var(--ink-soft); }
.values strong { color: var(--clay); font-family: var(--font-serif); font-size: 1.15rem; }
.guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.25rem; margin-top: 1.5rem; }
.guarantees li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: .95rem; }
.guarantees li::before { content: "✓"; position: absolute; left: 0; color: var(--clay); font-weight: 700; }

.pourquoi-side { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 2rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; position: relative; }
/* Temperature rule across the whole stats block (cool → warm) · woven orange. */
.stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-temperature); z-index: 2; }
.stat { background: var(--cream-card); padding: 1.6rem 1.25rem 1.4rem; position: relative; }
.stat-num { display: block; font-family: var(--font-serif); font-size: 2.4rem; color: var(--clay); line-height: 1; }
/* The Google-rating stat warms to orange · the "comfort" end of the spectrum. */
.stat--rating .stat-num { color: var(--emergency-text); }
.stat-head { display: flex; align-items: baseline; gap: .5rem; }
.stat-head .g-mark { width: 1.15rem; height: 1.15rem; flex: none; align-self: center; }
.stat-lbl { display: block; margin-top: .5rem; font-size: .85rem; color: var(--ink-muted); }
.founders { background: var(--ink); color: var(--cream); border-radius: 4px; padding: 1.75rem; }
.founders-photo {
  position: relative; aspect-ratio: 4 / 3; border-radius: 6px; margin: 0 0 1.25rem; overflow: hidden;
}
.founders-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) sepia(.14) brightness(.94); }
.founders-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(23,24,27,.72) 100%); }
/* Warm temperature seam on the founders image · woven orange, ties to the logo. */
.founders-photo::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 2; background: var(--grad-temperature); }
.founders-photo figcaption {
  position: absolute; left: .9rem; bottom: .7rem; z-index: 2; color: #fff;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
.founders-values { margin-bottom: 1rem; }
.founders-eyebrow {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ochre-soft); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem;
}
.founders-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad-temperature); border-radius: 2px; }
.founders-text { color: rgba(250,247,242,.9); font-size: .98rem; margin: 0; }
.founders .link-arrow { color: var(--ochre); }
.founders .link-arrow:hover { border-color: var(--ochre); }

/* ============================= TÉMOIGNAGES (real Google review set) ======= */
.temoin { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
/* Warm temperature seam across the top edge, ties the set to A's logo spectrum. */
.temoin::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-temperature); z-index: 3; }
/* Soft warm glow low-right so the dark ground reads considered, not flat. */
.temoin::after {
  content: ""; position: absolute; right: -8%; bottom: -12%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(247,147,30,.14) 0%, rgba(247,147,30,0) 68%); pointer-events: none; z-index: 0;
}
.temoin .wrap { position: relative; z-index: 1; }

.temoin-head-block {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 2.5rem;
}
.temoin-head { color: #fff; }
.temoin-intro { max-width: 30ch; }

/* Google 4,6 badge · a real, credible chip (kept from the prior single review). */
.g-badge {
  display: inline-flex; align-items: center; gap: .85rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: .7rem 1.2rem .7rem .95rem;
}
.g-badge .g-mark { width: 1.7rem; height: 1.7rem; flex: none; }
.g-badge-txt { display: flex; flex-direction: column; line-height: 1.15; }
.g-badge-lbl { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,247,242,.72); }
.g-badge-score { display: flex; align-items: center; gap: .45rem; }
.g-badge-score strong { font-family: var(--font-serif); font-size: 1.5rem; color: #fff; line-height: 1; }
.g-badge-stars { color: var(--emergency); letter-spacing: .06em; font-size: 1rem; }

/* Masonry set · columns keep the warm-editorial "wall of notes" feel; the feature
   card leads. Each card is a real review: stars + verbatim text + author + date. */
.temoin-grid { columns: 3 300px; column-gap: 1.25rem; margin: 0 0 2.5rem; }
.review {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 1.4rem 1.5rem; margin: 0 0 1.25rem;
  position: relative; transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.review:hover { transform: translateY(-3px); background: rgba(255,255,255,.07); border-color: var(--warm-hair); }
.review--feature {
  column-span: all; -webkit-column-span: all;
  background: linear-gradient(150deg, rgba(43,181,232,.1) 0%, rgba(28,117,188,.06) 45%, rgba(247,147,30,.12) 100%);
  border-color: rgba(255,255,255,.16);
  padding: 1.75rem 2rem; margin-bottom: 1.5rem;
}
.review--feature .review-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; color: #FDF9F3; max-width: 60ch; }
.review-mark { display: inline-block; width: 1.35rem; height: 1.35rem; line-height: 0; margin-bottom: .75rem; }
.review-stars { display: block; color: var(--emergency); letter-spacing: .08em; font-size: 1rem; margin-bottom: .6rem; }
.review-tag {
  display: inline-block; margin: 0 0 .6rem; padding: .15rem .6rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ochre-soft); background: rgba(143,205,235,.12); border: 1px solid rgba(143,205,235,.28);
}
.review-text {
  margin: 0 0 1rem; color: rgba(250,247,242,.9); font-size: 1rem; line-height: 1.6;
  quotes: "«\00a0" "\00a0»"; font-style: normal;
}
.review-text::before { content: open-quote; color: var(--ochre-soft); }
.review-text::after { content: close-quote; color: var(--ochre-soft); }
.review--feature .review-text::before, .review--feature .review-text::after { color: var(--emergency); }
.review-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.review-author { font-style: normal; font-weight: 700; color: #fff; font-family: var(--font-serif); font-size: 1.02rem; }
.review-date { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(250,247,242,.6); }

.temoin-cta { text-align: center; }
.temoin-credit { color: rgba(250,247,242,.72); font-size: .95rem; margin-bottom: 1.25rem; }

/* ============================= RÉGIES ============================= */
.regies { background: var(--cream-2); }
.regies-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.regies-lead p { color: var(--ink-soft); }
.regies-benefits { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.regies-benefits li { background: var(--cream-card); border: 1px solid var(--hair); border-left: 3px solid var(--clay); border-radius: 4px; padding: 1.1rem 1.25rem; color: var(--ink-soft); }
.regies-benefits strong { color: var(--ink); font-family: var(--font-serif); }
.regies-contract { background: var(--ink); color: rgba(250,247,242,.92); padding: 1.35rem 1.5rem; border-radius: 4px; font-size: .95rem; margin-bottom: 1.5rem; }

/* ============================= ZONES ============================= */
.zones-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.zones-list li { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); background: var(--cream-2); border: 1px solid var(--hair); border-radius: 999px; padding: .4rem 1rem; }
.zones-note { color: var(--ink-soft); font-style: italic; font-family: var(--font-serif); font-size: 1.15rem; }

/* ============================= CONTACT ============================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-cta { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0 2rem; max-width: 420px; }
.nap { font-style: normal; color: var(--ink-soft); line-height: 1.75; margin-bottom: 1.5rem; }
.nap strong { color: var(--ink); font-family: var(--font-serif); font-size: 1.2rem; }
.nap a { color: var(--clay); text-decoration: none; font-weight: 600; }
.nap a:hover { text-decoration: underline; }
.hours { border-top: 1px solid var(--hair); padding-top: 1.25rem; }
.hours-title { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 .6rem; }
.hours ul { display: flex; flex-direction: column; gap: .35rem; max-width: 340px; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); }
.hours-emergency { margin-top: .9rem; color: var(--emergency-text); font-weight: 600; }

.contact-form-wrap { background: var(--cream-card); border: 1px solid var(--hair); border-radius: 4px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.form-intro { color: var(--ink-soft); margin-bottom: 1.5rem; }
.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-muted); font-size: .82rem; }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--hair-strong); border-radius: 2px;
  padding: .75rem .85rem; min-height: 48px; transition: border-color .2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--clay); }
.form-success { margin-top: 1rem; padding: 1rem; background: rgba(28,117,188,.08); border-left: 3px solid var(--clay); color: var(--ink); border-radius: 4px; }

/* ============================= FOOTER ============================= */
.foot { background: var(--ink); color: rgba(250,247,242,.75); }
.foot-emergency { background: var(--emergency); text-align: center; padding: .9rem var(--page-x); }
.foot-emergency p { margin: 0; color: var(--ink); font-weight: 600; }
.foot-emergency a { color: var(--ink); }
.foot-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem,5vw,4rem); align-items: start; }
.foot-brand img { height: 34px; width: auto; margin-bottom: 1rem; }
.foot-brand p { color: rgba(250,247,242,.65); font-size: .92rem; max-width: 40ch; }
.foot-nav, .foot-social { display: flex; flex-direction: column; gap: .65rem; }
.foot-nav a, .foot-social a { color: rgba(250,247,242,.75); text-decoration: none; font-size: .95rem; }
.foot-nav a:hover, .foot-social a:hover { color: var(--ochre); }
.foot-legal { border-top: 1px solid rgba(250,247,242,.14); padding-block: 1.25rem; }
.foot-legal p { margin: 0; font-size: .82rem; color: rgba(250,247,242,.55); }

/* ============================= STICKY MOBILE BAR ============================= */
.sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; }
/* Home-indicator safe area is absorbed by extra bottom padding on each button so
   the coloured bar reaches the screen edge (no bare strip under the notch bar). */
.sticky-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 60px; padding-bottom: env(safe-area-inset-bottom, 0px); font-weight: 700; text-decoration: none; font-size: 1rem; }
.sticky-btn svg { width: 1.2em; height: 1.2em; }
.sticky-call { background: var(--emergency); color: var(--ink); }
.sticky-devis { background: var(--action); color: #fff; }

/* ============================= MOTION (JS-GATED, visible by default) ==== */
/* Reveal utility ONLY affects paint once JS adds .js to <body>. Content is
   fully visible with no JS. GSAP sets initial state with immediateRender:false. */
.js .reveal { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .realis-item:hover img { transform: none; }
}

/* ============================= GOOGLE TRUST ============================= */
/* Inline 4-colour Google "G" mark, sized in-flow. Reads instantly as Google. */
.g-mark { display: inline-block; vertical-align: middle; line-height: 0; }

/* Hero trust chip · small, credible, near the hero CTAs. */
.hero-google {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 999px; padding: .5rem .9rem; margin-bottom: 1.75rem;
  font-size: .9rem; font-weight: 600; box-shadow: 0 6px 18px rgba(20,22,26,.28);
  width: fit-content;
}
.hero-google .g-mark { width: 1.1rem; height: 1.1rem; }
.hero-google .g-stars { color: #E8890B; letter-spacing: .04em; }  /* crisp on white */
.hero-google .g-rating { color: var(--ink); font-weight: 700; }
.hero-google .g-sep { color: var(--ink-muted); font-weight: 400; }

/* Google review attribution inside the témoignage block. */
.g-review {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: .45rem .95rem; margin-bottom: 1.5rem; max-width: 100%;
  font-size: .88rem; font-weight: 600; color: #fff;
}
.g-review .g-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; background: #fff; border-radius: 50%;
}
.g-review .g-chip .g-mark { width: 1rem; height: 1rem; }
.g-review .g-stars { color: var(--emergency); letter-spacing: .04em; }

.g-inline { display: inline-flex; align-items: center; gap: .3rem; }
.g-inline .g-mark { width: .95rem; height: .95rem; }
.hero-trust .g-inline { font-family: var(--font-sans); }

/* ============================= B2B PARTNER (elevated) ============================= */
/* Premium partner section · dark, weighty, its own identity. Blue-led surface
   with an orange temperature seam so it feels warm, not corporate-cold. */
.partner { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.partner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(43,181,232,.14) 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(247,147,30,.16) 0%, transparent 55%);
}
.partner .wrap { position: relative; z-index: 1; }
/* Top temperature seam · the logo spectrum spanning the section edge. */
.partner-seam { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-temperature); z-index: 2; }

.partner-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.partner .rubric { color: rgba(250,247,242,.72); }
.partner .rubric .dot { box-shadow: 0 0 0 4px rgba(247,147,30,.26); }
.partner-title { color: #fff; font-size: clamp(2.1rem, 4vw, 3.3rem); }
.partner-title::after { content: ""; display: block; width: 84px; height: 3px; margin-top: 1.1rem; background: var(--grad-temperature); border-radius: 3px; }
.partner-lede { color: rgba(250,247,242,.9); font-size: 1.18rem; margin-top: 1.35rem; max-width: 60ch; }

.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: .5rem; }
.partner-point {
  background: rgba(255,255,255,.04); border: 1px solid var(--hairline-dark, rgba(255,255,255,.1));
  border-radius: 6px; padding: 1.5rem 1.4rem; position: relative; overflow: hidden;
  transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
/* CC-2: the 6-card partner set reads as ONE intentional temperature system, not a
   lonely single-orange card. Every card carries the same cool→warm gradient left
   accent, and the icon chips progress deliberately from cool (blue) to warm (orange)
   across the grid, so the whole set feels designed and orange-forward. */
.partner-point::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #2BB5E8 0%, #1C75BC 48%, #F7931E 100%); opacity: .92;
}
.partner-point:hover { transform: translateY(-4px); background: rgba(255,255,255,.06); border-color: var(--warm-hair); }
.partner-point .p-icon {
  width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#2BB5E8,#1C75BC); margin-bottom: 1rem; color: #fff;
}
/* Deliberate cool→warm progression across the six icon chips. */
.partner-point:nth-child(2) .p-icon { background: linear-gradient(135deg,#2BB5E8,#1C75BC); }
.partner-point:nth-child(3) .p-icon { background: linear-gradient(135deg,#1C75BC,#5B8FB0); }
.partner-point:nth-child(4) .p-icon { background: linear-gradient(135deg,#5E86A8,#B98A3E); color: #fff; }
.partner-point:nth-child(5) .p-icon { background: linear-gradient(135deg,#E08A2B,#F7931E); color: var(--ink); }
.partner-point:nth-child(6) .p-icon { background: linear-gradient(135deg,#FBB040,#F7931E); color: var(--ink); }
.partner-point .p-icon svg { width: 22px; height: 22px; }
.partner-point h3 { color: #fff; font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: .5rem; line-height: 1.2; }
.partner-point p { color: rgba(250,247,242,.82); font-size: .95rem; margin: 0; }

.partner-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2rem); border-radius: 8px;
  background: linear-gradient(100deg, rgba(43,181,232,.1) 0%, rgba(28,117,188,.06) 45%, rgba(247,147,30,.12) 100%);
  border: 1px solid rgba(255,255,255,.12);
}
.partner-cta-text { flex: 1 1 340px; }
.partner-cta-text strong { display: block; font-family: var(--font-serif); font-size: 1.35rem; color: #fff; margin-bottom: .35rem; }
.partner-cta-text p { color: rgba(250,247,242,.85); margin: 0; font-size: .96rem; }
.partner-cta .btn-clay { flex: none; }

/* ============================= SERVICE-AREA MAP ============================= */
.zones .zones-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.zones-map-wrap {
  position: relative; background: var(--cream-card); border: 1px solid var(--hair);
  border-radius: 8px; padding: clamp(1rem, 2vw, 1.75rem); overflow: hidden;
}
/* Warm temperature seam along the top of the map card · woven orange. */
.zones-map-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-temperature); z-index: 3; }
/* Map theming for Direction A (warm-editorial): honour the shared --sam-* contract. */
.zones-map-wrap .sam-map {
  --sam-field: #EAF6FC;
  --sam-field-line: rgba(21,155,215,.26);
  --sam-accent: #1C75BC;
  --sam-hq: #C42727;
  --sam-reach: #A9702F;              /* warm reach labels · orange family, AA on paper */
  --sam-label: #2D2E32;
  --sam-surface: #FFFFFF;
  --sam-grad-cool: #2BB5E8;
  --sam-grad-mid: #1C75BC;
  --sam-grad-warm: #F7931E;          /* connectors warm to orange (logo spectrum) */
  width: 100%; height: auto; display: block;
}
.zones-map-wrap .sam-label { font-family: var(--font-sans); }

/* Map animation · staggered pin reveal, connector draw. JS-gated (.js on body).
   NOTE: the pin <g> groups carry a positioning transform="translate(...)" attribute.
   A CSS transform on the group would OVERRIDE that and collapse the pins to origin,
   so we animate OPACITY on the group and scale the inner <use>/<circle> (which have
   no positioning transform) via transform-box:fill-box. */
.js .zones-map-wrap .sam-pin { opacity: 0; }
.js .zones-map-wrap .sam-pin use { transform: translateY(-6px) scale(.55); transform-box: fill-box; transform-origin: center bottom; }
.js .zones-map-wrap.in-view .sam-pin {
  opacity: 1; transition: opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 55ms);
}
.js .zones-map-wrap.in-view .sam-pin use {
  transform: translateY(0) scale(1); transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 55ms);
}
.js .zones-map-wrap .sam-hq { opacity: 0; }
.js .zones-map-wrap .sam-hq use { transform: scale(.5); transform-box: fill-box; transform-origin: center bottom; }
.js .zones-map-wrap.in-view .sam-hq { opacity: 1; transition: opacity .5s var(--ease); transition-delay: .1s; }
.js .zones-map-wrap.in-view .sam-hq use { transform: scale(1); transition: transform .55s var(--ease); transition-delay: .1s; }
/* Connectors are curved paths of varying length; the pathLength="1" attribute on
   each path normalises the draw-in so short and long arcs reveal consistently. */
.js .zones-map-wrap .sam-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .zones-map-wrap.in-view .sam-link { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + .15s); }
/* Reach connectors stay dashed (extended-reach signal); they fade in rather than draw. */
.js .zones-map-wrap .sam-link--reach { opacity: 0; }
.js .zones-map-wrap.in-view .sam-link--reach { opacity: 1; transition: opacity .7s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + .3s); }
/* Warm hub glow behind the Matran pin breathes gently (reduced-motion-safe). */
.js .zones-map-wrap .sam-hq-glow { opacity: 0; }
.js .zones-map-wrap.in-view .sam-hq-glow { opacity: .9; animation: sam-hub-breathe 4.5s var(--ease) .5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sam-hub-breathe { 0%,100% { opacity: .55; } 50% { opacity: .95; } }
/* HQ label pill + labels fade in with the cluster. */
.js .zones-map-wrap .sam-hq-label { opacity: 0; }
.js .zones-map-wrap.in-view .sam-hq-label { opacity: 1; transition: opacity .5s var(--ease); transition-delay: .35s; }
.js .zones-map-wrap .sam-pulse { animation: sam-pulse 2.6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sam-pulse { 0% { transform: scale(1); opacity: .28; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } }

.zones-aside .zones-list { margin-bottom: 1.25rem; }
.zones-legend { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.zones-legend li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--ink-soft); }
.zones-legend .lg-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.zones-legend .lg-hq { background: var(--action); }
.zones-legend .lg-served { background: var(--clay); }
.zones-legend .lg-reach { background: #A9702F; }

@media (prefers-reduced-motion: reduce) {
  .js .zones-map-wrap .sam-pin, .js .zones-map-wrap .sam-hq { opacity: 1; }
  .js .zones-map-wrap .sam-pin use, .js .zones-map-wrap .sam-hq use { transform: none; }
  .js .zones-map-wrap .sam-link { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .zones-map-wrap .sam-link--reach { opacity: .72; }
  .js .zones-map-wrap .sam-hq-glow { opacity: .9; animation: none; }
  .js .zones-map-wrap .sam-hq-label { opacity: 1; }
  .js .zones-map-wrap .sam-pulse { animation: none; }
}

/* ============================= RESPONSIVE ============================= */
@media (max-width: 1024px) {
  .pourquoi-grid, .regies-grid, .contact-grid { grid-template-columns: 1fr; }
  .pourquoi-side { position: static; }
  .svc-feature { grid-template-columns: 1fr; }
  .svc-media img { min-height: 240px; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .zones .zones-layout { grid-template-columns: 1fr; }
  .zones-aside { order: -1; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .mast-nav, .mast-phone { display: none; }
  /* Only Urgence stays filled-red in the mobile masthead; Devis lives in the
     drawer (ghost) + sticky bar (ghost) so two red buttons don't compete. */
  .mast-devis { display: none; }
  .mast-call-mobile { display: inline-flex; padding: .6rem 1rem; min-height: 44px; }
  .mast-burger { display: flex; }
  .mast-actions { margin-left: auto; }
  .mast-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mast-burger.open span:nth-child(2) { opacity: 0; }
  .mast-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 860px) {
  .temoin-head-block { align-items: flex-start; }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* room for sticky bar + home indicator */
  .sticky-bar { display: flex; }
  .engage-list { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  /* Review set collapses to a single readable column on mobile. */
  .temoin-grid { columns: 1; column-gap: 0; }
  .review--feature { column-span: none; -webkit-column-span: none; }
  /* Reset the desktop 3-col composition to a clean 2×2 on mobile. */
  .realis-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .realis-item:nth-child(1), .realis-item:nth-child(2),
  .realis-item:nth-child(3), .realis-item:nth-child(4) { grid-column: auto; grid-row: auto; }
  .realis-item { aspect-ratio: 4 / 3; }
  .guarantees { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; }
  .hero { min-height: 88vh; min-height: 88dvh; }
  .sec-cta { justify-content: stretch; }
  .sec-cta .btn { flex: 1 1 100%; }
  .partner-grid { grid-template-columns: 1fr; }
  .partner-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .partner-cta .btn { width: 100%; }
  /* Stop the text block's flex-basis (340px) from stretching to a tall column
     and leaving a ~450px void before the CTA button. */
  .partner-cta-text { flex: 0 0 auto; }
  /* Hide the SVG map on mobile · 15px labels scale to an illegible blob. The
     commune pill list carries the same information cleanly. */
  .zones-map-wrap { display: none; }
  /* Demote the second red CTA (Devis) to a ghost so only Urgence reads filled-red. */
  .sticky-devis { background: transparent; color: var(--action); border: 2px solid var(--action); }
}

/* --- Touch-target sizing · standalone links need ≥44px on touch surfaces.
   Inline text links get vertical padding to reach the minimum without
   disturbing the surrounding editorial layout. --------------------------- */
@media (hover: none) and (pointer: coarse), (max-width: 860px) {
  /* Service / section CTA links + régie band + "notre histoire" */
  .link-arrow, .link-urgent {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-block: .3rem;
  }
  /* Contact NAP phone / email / tel links: comfortable tap rows. */
  .nap a {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: .15rem;
  }
  /* Footer nav + social: each link its own 44px row. */
  .foot-nav a, .foot-social a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Emergency footer band phone link. */
  .foot-emergency a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Logo home-link: full 44px hit area on touch. */
  .mast-logo { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 400px) {
  .hero-trust { gap: 1rem 1.5rem; }
  .hero-trust li { flex: 1 1 40%; }
  .zones-list li { font-size: .95rem; }
}