/* ===========================================================================
   Plomberie AN — brand layer on top of the Sparkles design system.

   Everything here is built from the template's own design tokens (spacing,
   radius, typography, colour) so the additions read as native components.
   The palette itself is the Plomberie AN one: the Sparkles base literals are
   rewritten to the brand codes at build time (tools/build.py::recolour).
   =========================================================================== */

:root {
  /* Monochrome, after entrequatremurs.com: one warm off-black, white, and a
     warm stone for recessed surfaces. Contrast and space carry the page, so
     there is no accent colour to place. */
  --brand-navy: #181715;          /* the one dark: warm off-black */
  --brand-navy-deep: #100f0e;
  --brand-accent: #181715;        /* no accent colour; marks are ink */
  --brand-accent-soft: #181715;
  --brand-tint: #e4e2dd;          /* warm stone */
  --brand-paper: #ffffff;
  --brand-cream: #ffffff;
  --mobile-bar-h: 4.5rem;
}

/* --- dark surfaces ------------------------------------------------------- */
/* The template flips its tokens per component rather than per theme; this is
   the same variable set it applies to the dark hero card, made reusable. */
.tone-dark {
  background-color: var(--color-base-base-dark-100);
  color: var(--color-base-base-light-100);
  --color-tokens-ink-base: var(--color-base-base-dark-100);
  --color-tokens-tone-strong: var(--color-base-base-light-100);
  --color-tokens-tone-medium: var(--color-base-base-light-64);
  --color-tokens-tone-subtle: var(--color-base-base-light-48);
  --color-tokens-tone-faint: var(--color-base-base-light-16);
  --color-tokens-ink-lift: var(--color-base-lift-dark);
  --color-tokens-ink-depth: var(--color-base-depth-dark);
  --color-tokens-ink-dark-blue: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-background: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-text: var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-background: var(--brand-accent);
  --color-tokens-button-primary-hover-text: var(--color-base-base-light-100);
  --color-tokens-button-primary-hover-border: var(--color-base-base-light-0);
  --color-tokens-button-secondary-default-text: var(--color-base-base-light-100);
  --color-tokens-button-secondary-default-background: var(--color-base-base-light-8);
  --color-tokens-button-secondary-default-border: var(--color-base-base-light-0);
  --color-tokens-button-secondary-hover-text: var(--color-base-base-dark-100);
  --color-tokens-button-secondary-hover-background: var(--color-base-base-light-100);
  --color-tokens-button-tertiary-default-text: var(--color-base-base-light-100);
  --color-tokens-button-tertiary-hover-text: var(--color-base-base-light-88);
  --color-tokens-input-default-background: var(--color-base-lift-dark);
  --color-tokens-input-default-text: var(--color-base-base-light-48);
  --color-tokens-input-active-background: var(--color-base-lift-dark);
  --color-tokens-input-active-text: var(--color-base-base-light-100);
  --color-tokens-input-filled-background: var(--color-base-lift-dark);
  --color-tokens-input-filled-text: var(--color-base-base-light-100);
  --color-tokens-input-label: var(--color-base-base-light-64);
}

/* The brand blue is very saturated; as a large area on near-black it vibrates
   and stops reading as the brand. So it stays on the light surfaces, where it
   is crisp, and on dark it survives only as a small glyph inside a cream chip.
   The template's own dark hero works the same way: one light fill, no tint. */
.left_hero-home,
.card_help.is-other {
  --color-tokens-ink-dark-blue: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-background: var(--color-base-base-light-100);
  --color-tokens-button-primary-default-text: var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-background: var(--brand-accent);
  --color-tokens-button-primary-hover-text: var(--color-base-base-light-100);
}

.tone-dark .icon-wrap_feature,
.left_hero-home .icon-wrap_feature,
.card_help.is-other .icon-wrap_feature,
.tone-dark .icon-wrap_book-social,
.left_hero-home .icon-wrap_book-social {
  background-color: var(--color-base-base-light-100);
  color: var(--brand-accent);
}

/* Emphasis on dark is carried by weight and the outlined word, not by a tint. */
.tone-dark .heading-style-h1.accent,
.left_hero-home .heading-style-h1.accent { color: inherit; }

.tone-dark .cta_tel svg { color: var(--color-base-base-light-100); }
.tone-dark .wordmark span { color: var(--color-base-base-light-100); }

body {
  background-color: var(--color-base-base-light-100);
  color: var(--color-tokens-tone-strong);
}

.skip-link {
  position: absolute;
  left: -999rem;
  z-index: 100;
}
.skip-link:focus {
  left: var(--spacing--16);
  top: var(--spacing--16);
  padding: var(--spacing--12) var(--spacing--20);
  border-radius: var(--radius-ui-button-base);
  background-color: var(--brand-navy);
  color: var(--brand-cream);
}

:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 3px;
}

.page-wrapper { overflow: clip; }

/* --- reveal on scroll ----------------------------------------------------
   Fail-safe by construction: nothing is hidden by CSS alone. Content above the
   fold animates in with a keyframe whose resting state is "visible", and only
   elements JavaScript has armed (below the fold, with an observer watching
   them) are ever set to opacity 0. If the script never runs, or stops running,
   the page is simply visible. */
@keyframes revealIn {
  from { opacity: 0; transform: translateY(1.25rem); filter: blur(10px); }
}
.js [data-reveal].reveal-load {
  /* no fill mode: if the animation never runs, the element is simply visible */
  animation: revealIn .8s cubic-bezier(.16, 1, .3, 1);
}
.js [data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(1.25rem);
  filter: blur(10px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1),
              filter .7s cubic-bezier(.16, 1, .3, 1);
}
.js [data-reveal].reveal-armed.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal].reveal-load { animation: none; }
  .js [data-reveal].reveal-armed { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ===========================================================================
   Navigation
   =========================================================================== */
.master_navigation { position: sticky; top: 0; z-index: 60; }

/* A dark strip over a cream bar: one accent in the header, not three. */
.banner {
  padding-top: var(--spacing--8);
  padding-bottom: var(--spacing--8);
  background-color: var(--color-base-base-dark-100);
  color: var(--color-base-base-light-88);
  gap: var(--spacing--12);
}
.banner strong { color: var(--color-base-base-light-100); }
.banner-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8);
  color: var(--color-base-base-light-100);
  font-weight: var(--typography-weight-body-bold);
  text-decoration: none;
  white-space: nowrap;
}
.banner-tel > svg { width: 1rem; height: 1rem; flex: none; opacity: .7; }
.banner-tel:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .banner .u-hide-sm { display: none; } }

.navbar { border-bottom: 1px solid var(--color-base-base-dark-8); }

.wordmark {
  font-family: var(--typography-font-heading-sans);
  font-weight: var(--typography-all-weights-black, 900);
  font-size: 1.25rem;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--color-tokens-tone-strong);
  white-space: nowrap;
}
.wordmark span { color: var(--brand-accent); }
.brand_nav { width: auto; text-decoration: none; }

.nav-menu { background-color: transparent; }
.nav-menu_inner {
  display: flex;
  align-items: center;
  gap: var(--spacing--24);
}
.link_nav, .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing--4);
  padding: var(--spacing--8) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
/* The current page is marked by a rule under it, not by a third blue. */
.link_nav[aria-current="page"] { color: var(--color-tokens-tone-strong); }
.link_nav[aria-current="page"] > div { position: relative; }
.link_nav[aria-current="page"] > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.4rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand-accent);
}

.icon-wrap_dropdown { width: 1rem; height: 1rem; display: flex; }
.icon-dropdown { width: 100%; height: 100%; transition: transform .24s ease; }
.dropdown-toggle[aria-expanded="true"] .icon-dropdown { transform: rotate(180deg); }

.dropdown { position: relative; }
.dropdown-list {
  position: absolute;
  top: calc(100% + var(--spacing--12));
  left: 50%;
  translate: -50% 0;
  min-width: 34rem;
  padding: var(--spacing--24);
  border-radius: var(--radius-general-large);
  background-color: var(--color-base-lift-light);
  box-shadow: 0 1.5rem 3rem -1rem #11111029;
  border: 1px solid var(--color-base-base-dark-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dropdown.is-open .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown_inner { display: flex; flex-direction: column; gap: var(--spacing--20); }
.left_nav-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--spacing--24);
}
.nav_services { display: flex; flex-direction: column; gap: var(--spacing--12); align-items: flex-start; }
.nav_services-list { display: flex; flex-direction: column; gap: var(--spacing--4); width: 100%; }
.link_nav-services {
  padding: var(--spacing--8) var(--spacing--12);
  border-radius: var(--radius-general-small);
  color: var(--color-tokens-tone-strong);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.link_nav-services:hover {
  background-color: var(--color-tokens-ink-depth);
  color: var(--brand-navy);
}
.dropdown_footer { border-top: 1px solid var(--color-base-base-dark-8); padding-top: var(--spacing--16); }

.nav_tel {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8);
  padding: var(--spacing--8) var(--spacing--12);
  border-radius: var(--radius-ui-button-base);
  color: var(--color-tokens-tone-strong);
  font-weight: var(--typography-weight-body-bold);
  text-decoration: none;
  white-space: nowrap;
}
.nav_tel svg { width: 1.125rem; height: 1.125rem; }
.nav_tel:hover { color: var(--brand-navy); }

.menu-button { display: none; position: relative; }
.menu-button_inner { display: flex; }
.menu-button_inner.close { display: none; }
.menu-button[aria-expanded="true"] .menu-button_inner.open { display: none; }
.menu-button[aria-expanded="true"] .menu-button_inner.close { display: flex; }
.icon_menu { width: 1.25rem; height: 1.25rem; }
.nav_mobile-foot { display: none; }

@media (max-width: 1199px) {
  .menu-button { display: flex; }
  .nav_tel span { display: none; }
  .nav-menu {
    position: fixed;
    /* --nav-h is written by site.js from the real header height, because a
       percentage top would resolve against the viewport, not the header. */
    inset: var(--nav-h, 7rem) 0 0 0;
    height: auto;
    padding: var(--spacing--24) var(--grid--page-padding) var(--spacing--48);
    background-color: var(--color-base-base-light-100);
    overflow-y: auto;
    transform: translateY(1rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-menu_inner { flex-direction: column; align-items: stretch; gap: var(--spacing--4); }
  .nav-menu_inner .link_nav,
  .nav-menu_inner .dropdown-toggle {
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing--16) 0;
    border-bottom: 1px solid var(--color-base-base-dark-8);
  }
  /* One size for every top-level entry, whether or not it opens a submenu. */
  .nav-menu_inner .link_nav,
  .nav-menu_inner .dropdown-toggle,
  .nav-menu_inner .link_nav > div,
  .nav-menu_inner .dropdown-toggle > div {
    font-family: var(--typography-font-heading-sans);
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: var(--typography-all-weights-medium, 500);
    letter-spacing: -.01em;
  }
  .dropdown-list {
    position: static;
    translate: none;
    min-width: 0;
    padding: var(--spacing--8) 0 var(--spacing--16);
    border: 0;
    box-shadow: none;
    background: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .dropdown.is-open .dropdown-list { display: block; }
  .nav_mobile-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--8);
    margin-top: var(--spacing--24);
  }
}

/* ===========================================================================
   Hero
   =========================================================================== */
.section_hero-home { padding-bottom: var(--section-padding--small); }
/* The French headline runs longer than the template's five short words, so the
   hero grows with its content instead of being clipped to a fixed viewport
   height. */
.master_hero-home {
  align-items: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
}
.left_hero-home {
  overflow: visible;
  gap: var(--spacing--32);
  min-height: 32rem;
}
.heading_hero-home .heading-style-h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: .96;
}

.hero-eyebrow {
  margin: 0;
  font-family: var(--typography-font-family-label-1);
  font-size: var(--typography-size-label-1);
  line-height: var(--typography-line-height-label-1);
  font-weight: var(--typography-font-weight-label-1);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-tokens-tone-medium);
}
.heading_hero-home {
  display: block;
  margin: 0;
  max-width: 22ch;
  font-family: var(--typography-font-heading-sans);
  font-size: clamp(2.25rem, 3.6vw, 3.4rem);
  line-height: 1.1;
  font-weight: var(--typography-all-weights-bold, 700);
}
.heading-style-h1.hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  paint-order: stroke fill;
}
.left_hero-home .heading-style-h1.hollow { -webkit-text-stroke-color: var(--color-base-base-light-64); }
.heading-style-h1.accent { color: var(--brand-navy); }

.hero-lede {
  margin: 0;
  max-width: 34rem;
  font-size: var(--typography-size-b2);
  line-height: var(--typography-line-height-b2);
  color: var(--color-tokens-tone-medium);
}
.hero-lede a {
  color: var(--color-base-base-light-100);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.image_hero-home {
  border-radius: var(--radius-general-large);
  overflow: hidden;
  min-height: 22rem;
}

.grid_support { display: grid; }
.book_support-item {
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .24s ease, transform .24s ease;
}
.book_support-item:hover { transform: translateY(-2px); }
.book_support-item .icon-wrap_feature { padding: var(--spacing--12); }
.text-wrap_support-tile { display: flex; flex-direction: column; gap: var(--spacing--4); }
.text-wrap_support-tile > div:last-child { color: var(--color-tokens-tone-medium); }

@media (max-width: 767px) {
  .image_hero-home { min-height: 13.5rem; height: 13.5rem; }
}

/* ===========================================================================
   Trust marquee
   =========================================================================== */
.section_trust {
  padding-block: var(--spacing--16);
  background-color: var(--brand-tint);
  overflow: clip;
}
.trust-marquee { display: flex; width: 100%; }
.trust-marquee__track {
  display: flex;
  gap: var(--spacing--48);
  padding-right: var(--spacing--48);
  white-space: nowrap;
  animation: trust-scroll 38s linear infinite;
}
.trust-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8);
  font-family: var(--typography-font-family-label-1);
  font-size: var(--typography-size-label-1);
  font-weight: var(--typography-font-weight-label-1);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-base-base-dark-100);
}
.trust-marquee__item svg { width: 1.125rem; height: 1.125rem; color: var(--brand-accent); }
@keyframes trust-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-marquee__track { animation: none; } }

/* ===========================================================================
   Generic content section
   =========================================================================== */
.section_content {
  padding-top: var(--section-padding--medium);
  padding-bottom: var(--section-padding--medium);
}
.section_content.is-tight {
  padding-top: var(--section-padding--small);
  padding-bottom: var(--section-padding--small);
}
.section_content.is-ink {
  margin-block: var(--spacing--16);
  border-radius: var(--radius-general-large);
}
.content_section { display: flex; flex-direction: column; gap: var(--grid--content-gap); }
.headline_section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  max-width: var(--width--8-columns);
}
.headline_section h2 { text-transform: none; }
.subtext_section { max-width: var(--width--6-columns); color: var(--color-tokens-tone-medium); }
.subtext_section p { margin: 0; }
.subtext_section a, .prose_block a, .tone-medium a, .faq-paragraph a {
  color: var(--brand-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tone-dark .subtext_section a,
.tone-dark .prose_block a,
.tone-dark .tone-medium a,
.tone-dark .faq-paragraph a { color: var(--color-base-base-light-100); }

/* --- cards grid ---------------------------------------------------------- */
.grid_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_home-feature, .card_feature {
  padding: var(--spacing--32);
  gap: var(--spacing--20);
  align-items: flex-start;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background-color .24s ease, transform .24s ease;
}
.card_home-feature { flex-flow: column; display: flex; }
.card_home-feature.is-link:hover { transform: translateY(-3px); }
.card_home-feature.is-link:hover .card_arrow { background-color: var(--brand-navy); color: var(--brand-cream); }
.text-wrap_about-card, .text-wrap_feature-card { display: flex; flex-direction: column; gap: var(--spacing--8); }
.text-wrap_about-card > .tone-medium { color: var(--color-tokens-tone-medium); }
.card_arrow {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-ui-button-circle);
  background-color: var(--color-tokens-ink-lift);
  color: var(--color-tokens-tone-strong);
  transition: background-color .24s ease, color .24s ease;
}
.card_home-feature .card_arrow { position: absolute; top: var(--spacing--24); right: var(--spacing--24); }

/* --- lead service cards -------------------------------------------------- */
.grid_lead-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_lead-service {
  border-radius: var(--radius-general-large);
  overflow: hidden;
  background-color: var(--color-tokens-ink-depth);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .24s ease;
}
.card_lead-service:hover { transform: translateY(-3px); }
.card_lead-service:hover .card_arrow { background-color: var(--brand-navy); color: var(--brand-cream); }
.image-wrap_lead-service { aspect-ratio: 16 / 10; overflow: hidden; }
.image-wrap_lead-service img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.card_lead-service:hover .image-wrap_lead-service img { transform: scale(1.04); }
.content_lead-service {
  position: relative;
  padding: var(--spacing--32);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--12);
}
.content_lead-service h3 { text-transform: none; padding-right: 3rem; }
.content_lead-service .card_arrow { position: absolute; top: var(--spacing--24); right: var(--spacing--24); background-color: var(--color-base-lift-light); }

/* --- symptom chips ------------------------------------------------------- */
.grid_symptoms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--spacing--12);
}
.symptom_chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--16);
  padding: var(--spacing--20) var(--spacing--24);
  border-radius: var(--radius-general-default);
  background-color: var(--color-tokens-ink-depth);
  color: var(--color-tokens-tone-strong);
  font-weight: var(--typography-weight-body-bold);
  text-decoration: none;
  transition: background-color .24s ease, transform .24s ease;
}
.symptom_chip:hover { background-color: var(--brand-tint); transform: translateY(-2px); }
.symptom_chip-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--brand-accent); }

/* --- problem / solution -------------------------------------------------- */
.grid_psol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_psol {
  padding: var(--spacing--32);
  border-radius: var(--radius-general-default);
  background-color: var(--color-tokens-ink-lift);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--12);
  border: 1px solid var(--color-base-base-dark-8);
}
.tone-dark .card_psol { border-color: var(--color-base-base-light-8); }
.card_psol h3 { text-transform: none; }

/* --- how it works -------------------------------------------------------- */
.hiw_item { flex-flow: row; align-items: flex-start; gap: var(--spacing--32); }
.number-hiw { flex: none; }
.text-wrap_hiw { display: flex; flex-direction: column; gap: var(--spacing--8); }
.text-wrap_hiw > div:last-child { color: var(--color-tokens-tone-medium); }
@media (max-width: 767px) { .hiw_item { flex-flow: column; gap: var(--spacing--16); } }

/* --- FAQ ----------------------------------------------------------------- */
.faq-block { display: flex; flex-direction: column; gap: var(--spacing--12); max-width: var(--width--10-columns); }
.expandable-single { border: 1px solid var(--color-base-base-dark-8); }
.tone-dark .expandable-single { border-color: var(--color-base-base-light-8); }
.expandable-top {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  gap: var(--spacing--24);
}
.expandable-bottom {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.65, 0, .35, 1);
}
.expandable-single.is-open .expandable-bottom { grid-template-rows: 1fr; }
.expandable-inner { overflow: hidden; }
.faq-paragraph { margin: var(--spacing--16) 0 0; color: var(--color-tokens-tone-medium); }
.faq_animated-box { position: relative; }
.faq-vertical { transition: transform .3s ease, opacity .3s ease; }
.expandable-single.is-open .faq-vertical { transform: rotate(90deg); opacity: 0; }

/* --- zones --------------------------------------------------------------- */
.grid_zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--spacing--12);
}
.pill_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--8);
  padding: var(--spacing--16) var(--spacing--20);
  border-radius: var(--radius-ui-button-base);
  background-color: var(--color-tokens-ink-depth);
  color: var(--color-tokens-tone-strong);
  font-family: var(--typography-font-family-button-1);
  font-weight: var(--typography-font-weight-button-1);
  text-decoration: none;
  transition: background-color .24s ease, color .24s ease;
}
.pill_link:hover { background-color: var(--brand-navy); color: var(--brand-cream); }
.pill-note {
  font-size: var(--typography-size-label-2);
  text-transform: none;
  letter-spacing: normal;
  color: var(--brand-accent);
}
.pill_link:hover .pill-note { color: var(--brand-accent-soft); }

/* --- testimonials -------------------------------------------------------- */
.grid_testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_testimonial {
  padding: var(--spacing--32);
  border-radius: var(--radius-general-default);
  background-color: var(--color-tokens-ink-lift);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--20);
  justify-content: space-between;
}

/* --- projects ------------------------------------------------------------ */
.grid_projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_project {
  border-radius: var(--radius-general-large);
  overflow: hidden;
  background-color: var(--color-tokens-ink-depth);
  display: flex;
  flex-direction: column;
}
.image-wrap_project { aspect-ratio: 4 / 3; overflow: hidden; }
.content_project { padding: var(--spacing--24); display: flex; flex-direction: column; gap: var(--spacing--8); }
.content_project h3 { text-transform: none; }

/* --- articles ------------------------------------------------------------ */
.grid_articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_article {
  position: relative;
  padding: var(--spacing--32);
  border-radius: var(--radius-general-large);
  background-color: var(--color-tokens-ink-lift);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: transform .24s ease;
}
.card_article:hover { transform: translateY(-3px); }
.card_article:hover .card_arrow { background-color: var(--brand-navy); color: var(--brand-cream); }
.card_article h3 { text-transform: none; padding-right: 3rem; }
.card_article .card_arrow { position: absolute; top: var(--spacing--24); right: var(--spacing--24); background-color: var(--color-tokens-ink-depth); }

/* --- facts --------------------------------------------------------------- */
.grid_facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--spacing--24);
  padding: var(--spacing--32);
  border-radius: var(--radius-general-large);
  background-color: var(--color-tokens-ink-depth);
}
.fact_row { display: flex; flex-direction: column; gap: var(--spacing--4); }
.tbc { color: var(--color-tokens-tone-subtle); font-style: italic; }

/* --- prose --------------------------------------------------------------- */
.prose_block {
  max-width: var(--width--8-columns);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  color: var(--color-tokens-tone-medium);
}
.prose_block p { margin: 0; }
.prose_list { margin: 0; padding-left: var(--spacing--20); display: flex; flex-direction: column; gap: var(--spacing--8); }

/* --- lanes --------------------------------------------------------------- */
.grid_lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_lane {
  padding: var(--spacing--48);
  border-radius: var(--radius-general-large);
  background-color: var(--color-tokens-ink-depth);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--20);
  align-items: flex-start;
}
.card_lane h2 { text-transform: none; }
.card_lane > p { color: var(--color-tokens-tone-medium); }
.card_lane .button-group_left { margin-top: auto; padding-top: var(--spacing--8); gap: var(--spacing--8); }

/* --- big phone link ------------------------------------------------------ */
.cta_tel {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--12);
  font-family: var(--typography-font-heading-sans);
  font-size: var(--typography-size-h3);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--color-tokens-tone-strong);
  text-decoration: none;
}
.cta_tel svg { width: 1.5rem; height: 1.5rem; color: var(--brand-accent); }
.master_cta .cta_tel svg { color: var(--brand-accent); }
.cta_tel:hover { color: var(--brand-navy); }

/* --- images -------------------------------------------------------------- */
.image-wrap_section {
  border-radius: var(--radius-general-large);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

/* ===========================================================================
   Closing CTA
   =========================================================================== */
.master_cta { gap: var(--spacing--32); }
.content_cta h2 { text-transform: none; }

/* ===========================================================================
   Footer
   =========================================================================== */
.footer { padding-bottom: var(--spacing--16); }
.master-footer { border-radius: var(--radius-general-large); }
.footer_text-tile { display: flex; flex-direction: column; gap: var(--spacing--8); }
.footer-left-list { display: flex; flex-direction: column; gap: var(--spacing--32); }
.left-footer { gap: var(--spacing--32); }
.footer_columns { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.footer_line-tile { border-top: 1px solid var(--color-base-base-light-16); padding-top: var(--spacing--32); }
.footer_line {
  margin: 0;
  font-family: var(--typography-font-heading-sans);
  font-size: var(--typography-size-h3);
  line-height: 1.05;
  text-transform: none;
  max-width: 24ch;
}
.footer_bottom-tile {
  border-top: 1px solid var(--color-base-base-light-16);
  padding-top: var(--spacing--24);
  gap: var(--spacing--16);
}
.footer_bottom-halves {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--16);
}
.footer_legal { color: var(--color-tokens-tone-medium); font-size: var(--typography-size-b3); }

/* ===========================================================================
   Quote sheet (replaces the inline multi-step form)

   Without JavaScript this is a plain form card at the end of the page and
   every "Soumission" CTA is an anchor to it. site.js lifts it into a
   slide-up sheet and turns it back into three steps.
   =========================================================================== */
.quote-sheet {
  max-width: 38rem;
  margin: 0 auto var(--section-padding--small);
  padding-inline: var(--grid--page-padding);
}
.quote-sheet__scrim,
.quote-sheet__close { display: none; }
.quote-sheet__panel {
  padding: var(--spacing--32);
  border-radius: var(--radius-general-large);
  background-color: var(--color-base-lift-light);
  border: 1px solid var(--color-base-base-dark-8);
}
.quote-sheet .progress { display: none; }

.js .quote-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  max-width: none;
  margin: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}
.js .quote-sheet.is-open { visibility: visible; pointer-events: auto; }
.js .quote-sheet__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background-color: #11111099;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.js .quote-sheet.is-open .quote-sheet__scrim { opacity: 1; }
.js .quote-sheet__panel {
  position: absolute;
  inset: auto 0 0 0;
  margin-inline: auto;
  width: min(38rem, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: var(--radius-general-large) var(--radius-general-large) 0 0;
  background-color: var(--color-base-base-light-100);
  border: 0;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 -1.5rem 4rem #11111033;
}
.js .quote-sheet.is-open .quote-sheet__panel { transform: none; }
.js .quote-sheet .progress { display: flex; }
.js .quote-sheet__close { display: flex; }

@media (min-width: 768px) {
  .js .quote-sheet__panel {
    inset: auto auto 0 auto;
    right: var(--spacing--32);
    bottom: var(--spacing--32);
    border-radius: var(--radius-general-large);
    max-height: min(46rem, calc(100dvh - 4rem));
  }
}
@media (prefers-reduced-motion: reduce) {
  .quote-sheet__panel, .quote-sheet__scrim { transition: none; }
}
.quote-sheet__close {
  position: absolute;
  top: var(--spacing--20);
  right: var(--spacing--20);
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-ui-button-circle);
  background-color: var(--color-tokens-ink-depth);
  color: var(--color-tokens-tone-strong);
  cursor: pointer;
}
.quote-form { display: flex; flex-direction: column; gap: var(--spacing--24); }
.quote-form__head { display: flex; flex-direction: column; gap: var(--spacing--12); align-items: flex-start; padding-right: 3rem; }
.quote-form__head h2 { text-transform: none; }
.quote-form__body { display: flex; flex-direction: column; gap: var(--spacing--20); }
.progress {
  display: flex;
  align-items: center;
  gap: var(--spacing--12);
  margin: 0;
  font-size: var(--typography-size-label-2);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-tokens-tone-medium);
}
.progress__bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background-color: var(--color-base-base-dark-8);
  overflow: hidden;
}
.progress__bar i { display: block; height: 100%; background-color: var(--brand-navy); transition: width .3s ease; }
.mstep { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing--12); }
.mstep[hidden] { display: none; }
.mstep legend {
  padding: 0;
  font-family: var(--typography-font-heading-sans);
  font-size: var(--typography-size-h5);
  text-transform: none;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing--8); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: var(--spacing--12) var(--spacing--16);
  border-radius: var(--radius-ui-button-base);
  border: 1px solid var(--color-base-base-dark-16);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.chip input:checked + span { background-color: var(--brand-navy); border-color: var(--brand-navy); color: var(--brand-cream); }
.chip input:focus-visible + span { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: var(--spacing--4); }
.field label { font-size: var(--typography-size-label-2); text-transform: none; letter-spacing: normal; color: var(--color-tokens-input-label); }
.field .opt { text-transform: none; letter-spacing: 0; font-style: italic; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--spacing--12) var(--spacing--16);
  border-radius: var(--radius-ui-input);
  border: 1px solid var(--color-base-base-dark-16);
  background-color: var(--color-base-lift-light);
  font-family: var(--typography-font-body);
  font-size: var(--typography-size-b2);
  color: var(--color-tokens-tone-strong);
}
.field textarea { resize: vertical; }
.mnav { display: flex; flex-wrap: wrap; gap: var(--spacing--8); }
.mnav [hidden] { display: none; }
.quote-form__alt { margin: 0; font-size: var(--typography-size-b3); }
.quote-form__alt a { color: var(--brand-navy); font-weight: var(--typography-weight-body-bold); }
.quote-form__done {
  padding: var(--spacing--32);
  border-radius: var(--radius-general-default);
  background-color: var(--brand-tint);
  display: flex;
  flex-direction: column;
  gap: var(--spacing--8);
}

/* ===========================================================================
   Mobile action bar

   One opaque bar across the width, not two floating pills: page content has to
   pass BEHIND something solid, otherwise it shows through the gap between the
   buttons and reads as broken. The bottom padding clears the phone's gesture
   area as well as the bar.
   =========================================================================== */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 150;
    display: flex;
    gap: var(--spacing--8);
    align-items: stretch;
    padding: var(--spacing--12) var(--grid--page-padding);
    padding-bottom: calc(var(--spacing--12) + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-base-base-light-100);
    border-top: 1px solid var(--color-base-base-dark-8);
    box-shadow: 0 -.5rem 1.75rem #0f142214;
    transition: opacity .24s ease, transform .24s ease;
  }
  .mobile-bar__call,
  .mobile-bar__contact {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing--8);
    min-height: 3rem;
    padding: var(--spacing--12) var(--spacing--16);
    border: 1px solid transparent;
    border-radius: var(--radius-ui-button-base);
    font-family: var(--typography-font-family-button-1);
    font-size: var(--typography-size-button-1);
    font-weight: var(--typography-font-weight-button-1);
    letter-spacing: var(--typography-letter-spacing-button-1);
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-bar__call { background-color: var(--brand-navy); color: var(--brand-cream); }
  .mobile-bar__contact {
    background-color: transparent;
    border-color: var(--color-base-base-dark-16);
    color: var(--brand-navy);
  }
  .mobile-bar__icon { width: 1.125rem; height: 1.125rem; display: flex; flex: none; }
  body {
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .quote-sheet.is-open ~ .mobile-bar,
  .mobile-bar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 991px) {
  .grid_facts { grid-template-columns: 1fr 1fr; }
  .card_lane { padding: var(--spacing--32); }
}
@media (max-width: 767px) {
  .section_content { padding-block: var(--section-padding--small); }
  .grid_cards, .grid_lead-services, .grid_psol, .grid_testimonials,
  .grid_projects, .grid_articles, .grid_lanes { grid-template-columns: 1fr; }
  .grid_zones { grid-template-columns: 1fr 1fr; }
  .grid_facts { grid-template-columns: 1fr; }
  .card_home-feature, .card_feature, .card_psol, .card_article,
  .card_testimonial { padding: var(--spacing--24); }
  .footer_line { font-size: var(--typography-size-h4); }
}

/* ===========================================================================
   Icon sizing — the template sized a few icons off the SVG's own width/height
   attributes; ours are fluid, so they need an explicit box.
   =========================================================================== */
.icon-book-social { width: 1rem; height: 1rem; flex: none; }
/* the chip inverts the surface, so the glyph has to invert with it */
.icon-wrap_book-social.base { color: var(--color-base-base-dark-100); }
.icon-social { width: 1rem; height: 1rem; flex: none; }
.dropdown-toggle .icon-dropdown { display: flex; }
.icon-feature > svg, .icon_button > svg, .icon_button-tertiary > svg,
.icon_menu > svg, .icon-star > svg, .icon-book-social > svg,
.symptom_chip-icon > svg, .card_arrow > svg, .mobile-bar__icon > svg { width: 100%; height: 100%; }
.nav_tel > svg { width: 1.125rem; height: 1.125rem; flex: none; }
.cta_tel > svg { width: 1.5rem; height: 1.5rem; flex: none; }
.trust-marquee__item > svg { width: 1.125rem; height: 1.125rem; flex: none; }

.section_lead {
  margin: 0;
  max-width: var(--width--6-columns);
  color: var(--color-tokens-tone-medium);
  font-size: var(--typography-size-b1);
  line-height: var(--typography-line-height-b1);
}

/* Text beside its photo (the live page's split bands). */
.grid_split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid--column-gap);
  align-items: start;
}
.grid_split > * { min-width: 0; }
.split_col { display: flex; flex-direction: column; gap: var(--grid--content-gap); min-width: 0; }
.grid_split .image-wrap_section { aspect-ratio: 4 / 3; position: sticky; top: var(--spacing--120); }
@media (max-width: 991px) {
  .grid_split { grid-template-columns: 1fr; }
  .grid_split .image-wrap_section { position: static; }
}

/* Extra in-page anchor targets, offset for the sticky header. */
.anchor { display: block; height: 0; scroll-margin-top: 7rem; }
section[id] { scroll-margin-top: 7rem; }


/* ===========================================================================
   Buttons — the arrow lives inside the pill

   The template parks its arrow off the right edge and slides the pill's padding
   on hover to reveal it; without the Webflow runtime that reads as a stray
   glyph next to an off-centre label. Here the arrow is a normal flex child.
   =========================================================================== */
.cta_primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.cta_primary:hover { padding-right: var(--spacing--20); }
.btn-inner {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8);
  pointer-events: none;
}
.text-button { position: relative; z-index: 1; }
.btn-arrow {
  width: 1rem;
  height: 1rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}
.btn-arrow > svg { width: 100%; height: 100%; display: block; }
.cta_primary:hover .btn-arrow { transform: translateX(3px); }
.btn-bg { z-index: 0; }

/* ===========================================================================
   "Comment pouvons-nous aider?" — two rows of four, then a way out
   =========================================================================== */
.grid_help {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing--12);
}
.card_help {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing--32);
  min-height: 11rem;
  padding: var(--spacing--24);
  border-radius: var(--radius-general-default);
  background-color: var(--color-tokens-ink-depth);
  color: var(--color-tokens-tone-strong);
  text-decoration: none;
  transition: background-color .24s ease, transform .24s ease;
}
.card_help:hover { background-color: var(--brand-tint); transform: translateY(-2px); }
.card_help:hover .card_arrow { background-color: var(--brand-navy); color: var(--brand-cream); }
.card_help .icon-wrap_feature { align-self: flex-start; padding: var(--spacing--12); }
.card_help-title {
  margin-top: auto;
  padding-right: 2.5rem;
  font-family: var(--typography-font-heading-sans);
  font-size: var(--typography-size-h5);
  line-height: var(--typography-line-height-h5);
  font-weight: var(--typography-font-weight-h5);
  letter-spacing: var(--typography-letter-spacing-h5);
}
.card_help-note { color: var(--color-tokens-tone-medium); font-size: var(--typography-size-b3); }
.card_help .card_arrow {
  position: absolute;
  top: var(--spacing--24);
  right: var(--spacing--24);
  background-color: var(--color-base-lift-light);
}
.card_help.is-other {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing--20);
  min-height: 0;
  background-color: var(--color-base-base-dark-100);
  color: var(--color-base-base-light-100);
  --color-tokens-tone-medium: var(--color-base-base-light-64);
  --color-tokens-ink-lift: var(--color-base-lift-dark);
}
.card_help.is-other .card_help-title { margin-top: 0; padding-right: 0; }
.card_help.is-other .card_help-note { margin-right: auto; }
.card_help.is-other .card_arrow { position: static; background-color: var(--color-base-base-light-8); color: inherit; }
.card_help.is-other:hover { background-color: var(--color-base-lift-dark); }
.card_help.is-other:hover .card_arrow { background-color: var(--brand-accent); color: var(--brand-navy); }

@media (max-width: 991px) {
  .grid_help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .grid_help { grid-template-columns: 1fr; }
  .card_help { min-height: 0; gap: var(--spacing--20); }
  .card_help.is-other { flex-direction: column; align-items: flex-start; }
  .card_help.is-other .card_arrow { position: absolute; top: var(--spacing--24); right: var(--spacing--24); }
}

/* ===========================================================================
   Section headings with an eyebrow rule, and headline-beside-intro
   =========================================================================== */
.eyebrow_rule {
  display: flex;
  align-items: center;
  gap: var(--spacing--12);
  font-family: var(--typography-font-family-label-1);
  font-size: var(--typography-size-label-1);
  font-weight: var(--typography-font-weight-label-1);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-tokens-tone-medium);
}
.eyebrow_rule span {
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand-accent);
  flex: none;
}
.headline_split-left { display: flex; flex-direction: column; gap: var(--spacing--16); }
.headline_split-left h2 { text-transform: none; }
.headline_split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--grid--column-gap);
  align-items: end;
}
.headline_split-right {
  padding-left: var(--spacing--24);
  border-left: 2px solid var(--brand-accent);
  color: var(--color-tokens-tone-medium);
}
.section_note {
  margin: 0;
  max-width: var(--width--6-columns);
  color: var(--color-tokens-tone-medium);
  font-size: var(--typography-size-b3);
}
@media (max-width: 767px) {
  .headline_split { grid-template-columns: 1fr; align-items: start; }
}

/* ===========================================================================
   Licences et normes
   =========================================================================== */
.grid_credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--spacing--12);
}
.card_credential {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--20);
  padding: var(--spacing--24);
  border-radius: var(--radius-general-default);
  background-color: var(--color-tokens-ink-depth);
}
.card_credential .icon-wrap_feature { align-self: flex-start; padding: var(--spacing--12); }
.card_credential h3 { text-transform: none; }

/* ===========================================================================
   Pourquoi nous — a navy panel over a photo
   =========================================================================== */
.master_why {
  position: relative;
  border-radius: var(--radius-general-large);
  overflow: hidden;
  isolation: isolate;
}
.why_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
  z-index: -1;
}
.why_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--grid--column-gap);
  padding: var(--section-padding--small) var(--grid--page-padding);
}
.why_left { display: flex; flex-direction: column; gap: var(--spacing--16); align-self: center; }
.why_left h2 { text-transform: none; }
.why_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing--12);
  align-content: center;
}
.why_item {
  display: flex;
  align-items: center;
  gap: var(--spacing--12);
  padding: var(--spacing--16) var(--spacing--20);
  border-radius: var(--radius-ui-button-base);
  background-color: var(--color-base-base-light-8);
  border: 1px solid var(--color-base-base-light-8);
  font-weight: var(--typography-weight-body-bold);
}
.why_item-mark {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-ui-button-circle);
  background-color: var(--color-base-base-light-100);
  color: var(--brand-accent);
}
.why_item-mark > svg { width: 1.125rem; height: 1.125rem; }
.why_foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--16);
  padding: var(--spacing--20) var(--grid--page-padding);
  background-color: var(--brand-accent);
  color: var(--brand-navy);
  --color-tokens-button-primary-default-background: var(--brand-navy);
  --color-tokens-button-primary-default-text: var(--color-base-base-light-100);
  --color-tokens-button-primary-hover-background: var(--color-base-base-light-100);
  --color-tokens-button-primary-hover-text: var(--brand-navy);
}
.why_foot p { font-weight: var(--typography-weight-body-bold); }
@media (max-width: 991px) {
  .why_inner { grid-template-columns: 1fr; }
  .why_grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Ce que ça coûte
   =========================================================================== */
.grid_pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--grid--column-gap);
}
.card_pricing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  align-items: flex-start;
  padding: var(--spacing--32);
  border-radius: var(--radius-general-large);
  background-color: var(--color-base-lift-light);
  border: 1px solid var(--color-base-base-dark-8);
}
.card_pricing h3 { text-transform: none; }
.card_pricing .cta_tertiary { margin-top: auto; border: 0; background: none; cursor: pointer; padding: 0; }

/* ===========================================================================
   Dégât d'eau et assurance
   =========================================================================== */
.master_insurance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid--column-gap);
  align-items: center;
}
.insurance_text { display: flex; flex-direction: column; gap: var(--spacing--16); align-items: flex-start; }
.insurance_text h2 { text-transform: none; }
.insurance_text .button-group_left { margin-top: var(--spacing--8); }
.insurance_image {
  border-radius: var(--radius-general-large);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
@media (max-width: 991px) { .master_insurance { grid-template-columns: 1fr; } }

/* ===========================================================================
   The call-to-action cell inside the services grid
   =========================================================================== */
.card_lead-service.is-cta {
  background-color: var(--brand-accent);
  color: var(--brand-navy);
  justify-content: center;
  --color-tokens-button-primary-default-background: var(--brand-navy);
  --color-tokens-button-primary-default-text: var(--color-base-base-light-100);
  --color-tokens-button-primary-hover-background: var(--color-base-base-light-100);
  --color-tokens-button-primary-hover-text: var(--brand-navy);
}
.card_lead-service.is-cta:hover { transform: none; }
.card_lead-service.is-cta .content_lead-service { gap: var(--spacing--20); align-items: flex-start; }

/* ===========================================================================
   Small screens: one column, and buttons that line up

   Left-aligned stacks of pills at their natural widths read as ragged, so at
   phone widths every button group stretches to the column.
   =========================================================================== */
@media (max-width: 575px) {
  .button-group_left,
  .button-group_center,
  .btn-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing--8);
  }
  .button-group_left > .cta_primary,
  .button-group_center > .cta_primary,
  .why_foot > .cta_primary,
  .insurance_text .cta_primary,
  .card_lane .cta_primary,
  .content_lead-service .cta_primary,
  .mnav > .cta_primary {
    width: 100%;
  }
  .cta_primary { justify-content: center; }
  .cta_primary:hover { padding-right: var(--spacing--20); }

  .mnav { flex-direction: column; align-items: stretch; }
  .why_foot { flex-direction: column; align-items: stretch; text-align: left; }
  .nav_mobile-foot { flex-direction: column; align-items: stretch; }
  .nav_mobile-foot > .cta_primary { width: 100%; }

  /* the badge row follows the heading's edge rather than centring against it */
  .button-group_book { justify-content: flex-start; }
  .link_book-social { width: 100%; }
  .button-social-book { flex: 1; }

  /* Vertical rhythm: the template's content gap is 8.25rem, which opens a hole
     between a heading and its cards on a phone. Explicit values here rather
     than tokens, so the spacing does not move with a breakpoint. */
  .section_content { padding-block: 2.75rem; }
  .section_content.is-tight { padding-block: 2.25rem; }
  .content_section { gap: 1.75rem; }
  .headline_section { gap: var(--spacing--12); }
  .headline_split { gap: var(--spacing--16); }
  .why_inner { padding: var(--spacing--32) var(--spacing--24); gap: var(--spacing--32); }
  .why_foot { padding: var(--spacing--20) var(--spacing--24); }
  .master_cta { padding: var(--section-padding--small) var(--spacing--24); }
  .content_cta { gap: var(--spacing--20); }
  .card_pricing, .card_lane { padding: var(--spacing--24); }
  .grid_lead-services, .grid_pricing, .grid_lanes, .grid_credentials { gap: var(--spacing--12); }
  .cta_tel { font-size: var(--typography-size-h4); }
}

/* ===========================================================================
   The three ways in, straight under the hero
   =========================================================================== */
.section_routes { padding-block: var(--section-padding--small); }
.grid_routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--color-base-base-dark-16);
  border-block: 1px solid var(--color-base-base-dark-16);
}
.card_route {
  display: flex;
  gap: var(--spacing--20);
  padding: var(--spacing--32) var(--spacing--24);
  background-color: var(--color-base-base-light-100);
  color: var(--color-tokens-tone-strong);
  text-decoration: none;
  transition: background-color .24s ease;
}
.card_route:hover { background-color: var(--brand-tint); }
.card_route-num {
  font-size: var(--typography-size-b3);
  color: var(--color-tokens-tone-subtle);
  flex: none;
  padding-top: .25rem;
}
.card_route-body { display: flex; flex-direction: column; gap: var(--spacing--8); }
.card_route-label {
  font-size: var(--typography-size-h5);
  line-height: 1.2;
  font-weight: var(--typography-all-weights-semi-bold, 600);
}
.card_route-text { color: var(--color-tokens-tone-medium); }
.card_route-action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8);
  margin-top: var(--spacing--8);
  font-weight: var(--typography-weight-body-bold);
}
.card_route-arrow { width: 1rem; height: 1rem; display: flex; transition: transform .24s ease; }
.card_route-arrow > svg { width: 100%; height: 100%; }
.card_route:hover .card_route-arrow { transform: translateX(3px); }
@media (max-width: 991px) { .grid_routes { grid-template-columns: 1fr; } }

/* the wordmark is one colour now, like the reference brand's */
.wordmark span { color: inherit; }


/* ===========================================================================
   Sentence-case headings need air the display ratio does not give them
   =========================================================================== */
h1, h2, h3,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5,
.headline_section h2, .headline_split-left h2,
.content_cta h2, .card_lane h2, .insurance_text h2, .why_left h2 {
  line-height: 1.14;
}
.heading-style-h5, .heading-style-h4 { line-height: 1.25; }
.card_help-title, .card_route-label { line-height: 1.25; }
.footer_line { line-height: 1.14; }

/* ===========================================================================
   Rénovation: image-led project bands
   =========================================================================== */
.reno_bands { display: flex; flex-direction: column; gap: var(--section-padding--small); }
.reno_band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--grid--column-gap);
  align-items: center;
  scroll-margin-top: 7rem;
}
.reno_band.is-flipped .reno_media { order: 2; }
.reno_media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius-general-large);
  background-color: var(--brand-tint);
}
.reno_media img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.reno_band:hover .reno_media img { transform: scale(1.03); }
.reno_text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16);
  align-items: flex-start;
  max-width: 34rem;
}
.reno_index {
  font-size: var(--typography-size-b3);
  color: var(--color-tokens-tone-subtle);
  font-variant-numeric: tabular-nums;
}
.reno_detail {
  margin: var(--spacing--8) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.reno_detail li {
  padding: var(--spacing--12) 0;
  border-top: 1px solid var(--color-base-base-dark-8);
  color: var(--color-tokens-tone-medium);
}
.reno_detail li:last-child { border-bottom: 1px solid var(--color-base-base-dark-8); }
@media (max-width: 991px) {
  .reno_band { grid-template-columns: 1fr; gap: var(--spacing--24); }
  .reno_band.is-flipped .reno_media { order: 0; }
  .reno_bands { gap: var(--section-padding--extra-small); }
}