/* ====================================================================
   S.R.T Inc — Agence de placement Montréal
   Figma: L7Ub9h73amBFlJzV7g1Sso · node 16738:6524 (1920 × 6844)

   Section map (exact Figma frame heights, total 6844):
     header       16738:6526   1920 × 100
     hero         16738:6539   1920 × 981
     à propos     16738:6554   1920 × 773
     services     16738:6592   1920 × 876
     avantages    16738:6694   1920 × 902
     approche     17353:5689   1920 × 984
     secteurs     16738:7066   1920 × 674
     partenaires  17732:5021   1920 × 393
     témoignages  16738:6985   1920 × 612
     contact      16739:7976   1920 × 548
     footer       16739:7960   1920 × 101
   ====================================================================
   TABLE OF CONTENTS
     1.  Design tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Components — eyebrow, button, section head
     5.  Header
     6.  Hero
     7.  À propos
     8.  Services
     9.  Pourquoi nous choisir
     10. Notre approche
     11. Secteurs
     12. Partenaires
     13. Témoignages
     14. Contact
     15. Footer
     16. Responsive
   ==================================================================== */


/* ====================================================================
   1. DESIGN TOKENS
   ==================================================================== */
:root {
  /* --- Colour ------------------------------------------------------
     Backgrounds and the gold accent are read directly from the Figma
     render; the header values come from its design context. */
  --c-black: #000000;
  /* header bg, form inputs               */
  --c-ink: #080808;
  /* services bg, sector card body, footer*/
  --c-ink-soft: #0f0f0f;
  /* dark cards, contact section          */
  --c-mist: #eceff2;
  /* light section background             */
  --c-white: #ffffff;

  --c-gold: #c9a84c;
  /* brand accent                         */
  --c-gold-hover: #d9bb63;
  --c-gold-nav: #8a7a60;
  /* header navigation links              */
  --c-gold-10: rgba(201, 168, 76, 0.10);
  /* icon tiles           */
  --c-gold-30: rgba(201, 168, 76, 0.30);
  /* inactive carousel dot*/

  --c-text-dark: #080808;
  /* headings on light backgrounds        */
  --c-text-body: #5a5a5a;
  /* body copy on light backgrounds       */
  --c-text-light: #ffffff;
  /* headings on dark backgrounds         */
  --c-text-muted: rgba(255, 255, 255, 0.68);
  /* body copy on dark    */
  --c-border-dark: rgba(255, 255, 255, 0.10);

  /* --- Typography --------------------------------------------------
     Sans is Outfit (confirmed in the header design context).
     Display serif is matched to the Figma render — swap the value
     below if the source file names a different family. */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Label / nav / button scale — exact from Figma (16 / 15 / 2.5) */
  --fs-label: 16px;
  --lh-label: 15px;
  --ls-label: 2.5px;

  /* --- Layout ------------------------------------------------------ */
  --page-w: 1920px;
  --container-w: 1280px;
  --gutter: 320px;
  /* (1920 − 1280) / 2 */
  --header-h: 100px;
  --header-h-sm: 74px;
  /* hauteur du header une fois scrollé */
  --partner-step: 13.04px;
  /* espacement du bandeau partenaires */

  /* --- Motion ------------------------------------------------------ */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-header: 350ms cubic-bezier(.4, 0, .2, 1);
  --t-reveal: 800ms cubic-bezier(.22, .61, .36, 1);
}


/* ====================================================================
   2. RESET & BASE
   ==================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* les ancres ne passent plus sous le header fixe */
  scroll-padding-top: calc(var(--header-h-sm) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  background-color: var(--c-white);
  color: var(--c-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-gold);
  color: var(--c-ink);
  font-size: 14px;
}

.skip-link:focus {
  left: 0;
}

/* Placeholder tone so the layout stays readable until the photographic
   assets listed in assets/ASSETS.md are dropped into /images. */
.hero__media,
.about__figure,
.services__figure,
.approach__figure,
.sector__media,
.testimonials__media,
.partner {
  background-color: #d7d9dd;
}

.section--dark .services__figure {
  background-color: #1b1b1b;
}


/* ====================================================================
   3. LAYOUT PRIMITIVES
   ==================================================================== */

/* The 1280px content column every Figma "Container" sits in (x = 320). */
.container {
  width: var(--container-w);
  margin-inline: auto;
}

.section--dark {
  background-color: var(--c-ink);
  color: var(--c-text-light);
}

.section--mist {
  background-color: var(--c-mist);
}


/* ====================================================================
   4. COMPONENTS
   ==================================================================== */

/* --- Eyebrow -------------------------------------------------------
   Figma: 1px rule (32 or 40 wide) + 16/15/2.5 uppercase gold label,
   separated by a 12px gap (16px in the hero). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 15px;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
}

.eyebrow--center {
  justify-content: center;
}

.eyebrow__rule {
  flex: 0 0 auto;
  width: 32px;
  height: 1px;
  background-color: var(--c-gold);
}

/* Hero variant: 40px rules, 16px gaps */
.hero .eyebrow {
  gap: 16px;
  height: 24px;
}

.hero .eyebrow__rule {
  width: 40px;
}

/* --- Button --------------------------------------------------------
   Figma primary: 294 × 47 — padding 16/32, 205 label, 12 gap, 13 icon.
   Figma ghost:   349 × 49 — same box plus a 1px border. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: background-color var(--t-fast), color var(--t-fast),
    border-color var(--t-fast);
}

.btn__icon,
.btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.btn--gold {
  background-color: var(--c-gold);
  color: var(--c-white);
  /* texte blanc demandé — remplacer par var(--c-ink) pour revenir au noir */
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background-color: var(--c-gold-hover);
}

.btn--ghost {
  background-color: rgba(255, 255, 255, 0.17);
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--lg {
  padding: 16px 32px;
}

.btn--ghost.btn--lg {
  padding: 16px 32px;
}

/* +1px border = 49px tall */

.btn--block {
  width: 100%;
  justify-content: center;
  padding: 16px 20px;
}

.btn--block .btn__icon {
  width: 12px;
  height: 12px;
}

/* --- Section head (centred eyebrow + serif H2) --------------------- */
.section-head {
  text-align: center;
}

.section-head__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 44px;
  line-height: 60px;
  color: var(--c-text-dark);
  max-width: 756px;
  margin-inline: auto;
}

/* Sections whose Figma heading box is 48px per line rather than 60px */
.section-head__title--tight {
  font-size: 46px;
  line-height: 48px;
  max-width: none;
}

.section--dark .section-head__title {
  color: var(--c-text-light);
}


/* ====================================================================
   5. HEADER — 16738:6526 · 1920 × 100 · #000, 1px bottom border #c9a84c
   ==================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background-color: var(--c-black);
  border-bottom: 1px solid var(--c-gold);
  transition: height var(--t-header), background-color var(--t-header),
    box-shadow var(--t-header);
}

/* État compact : déclenché par la classe .is-scrolled sur <body> */
.is-scrolled .site-header {
  height: var(--header-h-sm);
  background-color: rgba(0, 0, 0, 0.94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
}

.site-header__inner {
  position: relative;
  height: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
}

/* Logo — node 16739:7301: a 220 × 82 window onto the 1200 × 400 source,
   scaled 276.5% / 248.45% and offset −23.04% / −74.53%. */
.site-header__logo {
  position: absolute;
  left: 321px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.site-header__logo img {
  display: block;
  width: auto;
  transition: height var(--t-header);
}

.is-scrolled .site-header__logo img {
  height: 56px;
}

.site-nav {
  position: absolute;
  left: 50%;
  top: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  display: block;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-nav);
  white-space: nowrap;
  transition: color var(--t-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--c-gold);
}

/* CTA — node 16739:7298: x 1357, 243 × 47, padding 16 / 20 */
.site-header__cta {
  position: absolute;
  left: 1357px;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px 20px;
  transition: padding var(--t-header), background-color var(--t-fast);
}

.is-scrolled .site-header__cta {
  padding: 12px 18px;
}

/* Lien de nav actif (scroll-spy) */
.site-nav__link.is-active {
  color: var(--c-gold);
}

.nav-toggle {
  display: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background-color: var(--c-gold);
}


/* ====================================================================
   6. HERO — 16738:6539 · 1920 × 981
   ==================================================================== */
.hero {
  position: relative;
  height: 981px;
  overflow: hidden;
  background-color: var(--c-ink);
  color: var(--c-text-light);
}

/* Photo — node 18118:5838: 1920 × 1129 anchored at y = −148 */


.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ellipse 39 — node 16739:7363: 2588 × 800 at (−314, 413) */
.hero__scrim {
  position: absolute;
  left: -314px;
  top: 413px;
  width: 2588px;
  height: 800px;
  background: radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.97) 0%,
      rgba(0, 0, 0, 0.92) 38%,
      rgba(0, 0, 0, 0.55) 62%,
      rgba(0, 0, 0, 0) 78%);
}

/* Content container — node 16739:7344: 1244 × 431 at (338, 476.5) */
.hero__content {
  position: absolute;
  left: 338px;
  top: 476.5px;
  width: 1244px;
  text-align: center;
}

.hero__title {
  width: 1196px;
  margin: 48px auto 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 52px;
  line-height: 81px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hero__lead {
  width: 899px;
  margin: 16px auto 0;
  font-size: 18px;
  line-height: 29.5px;
  color: #fff;
  font-weight: 300;
}

.hero__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}


/* ====================================================================
   7. À PROPOS — 16738:6554 · 1920 × 773 · #FFFFFF
   ==================================================================== */
.about {
  height: 773px;
  padding-top: 64px;
  background-color: var(--c-white);
}

.about__grid {
  display: grid;
  grid-template-columns: 585px 654px;
  justify-content: space-between;
  width: var(--container-w);
  margin-inline: auto;
}

.about__col {
  padding-top: 19.5px;
}

/* 83.5 − 64 */

.about__title {
  margin-top: 29px;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 42px;
  line-height: 50.5px;
  color: var(--c-text-dark);
}

.about__body {
  margin-top: 29px;
}

.about__body p {
  font-size: 16px;
  line-height: 27px;
  color: #000;
  font-weight: 300;
}

.about__body p+p {
  margin-top: 27px;
}

/* Feature grid — 2 × 2, cells 288.5 × 58, gaps 8 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 288.5px);
  gap: 8px;
  margin-top: 16px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  padding: 11px;
  background-color: var(--c-ink-soft);
}

.feature__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--c-gold-10);
  color: var(--c-gold);
}

.feature__icon svg {
  width: 14px;
  height: 14px;
}

.feature__label {
  font-size: 16px;
  line-height: 24px;
  color: var(--c-white);
}

.about__col>.btn {
  margin-top: 29px;
}

/* Photo — frame 654 × 645 at (946, 1045); image 683 × 663 offset (−25, −18) */
.about__figure {
  position: relative;
  width: 654px;
  height: 645px;
  overflow: hidden;
}

.about__figure>img {
  position: absolute;
  left: -25px;
  top: -18px;
  width: 683px;
  height: 663px;
  object-fit: cover;
  max-width: none;
}

/* Stats — 589 × 58.5 at (34, 564) inside the photo frame */
.stats {
  position: absolute;
  left: 34px;
  top: 564px;
  display: grid;
  grid-template-columns: repeat(2, 286.5px);
  gap: 16px;
  width: 589px;
}

.stat {
  padding-left: 20px;
}

.stat__value {
  display: block;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 40px;
  color: var(--c-gold);
}

.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A7A60;
}


/* ====================================================================
   8. SERVICES — 16738:6592 · 1920 × 876 · #080808
   ==================================================================== */
.services {
  height: 876px;
  padding-top: 64px;
}

.services .section-head__title--tight {
  margin-top: 24px;
}

/* Grid — 1280 × 613 at y = 199 within the section container */
.services__grid {
  display: grid;
  grid-template-columns: 680px 552px;
  gap: 48px;
  width: var(--container-w);
  margin: 48px auto 0;
  /* head block is 87 tall → 199 − 64 − 87 = 48 */
}

.services__figure {
  position: relative;
  width: 680px;
  height: 613px;
  overflow: hidden;
}

.services__figure img {
  position: absolute;
  left: 0;
  top: -62px;
  width: 680px;
  height: 800px;
  object-fit: cover;
  max-width: none;
}

.services__intro {
  font-size: 16px;
  line-height: 29.33px;
  color: #fff;
  font-weight: 300;
}

.services__list-block {
  margin-top: 29.33px;
}

.services__list-intro {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

/* Check list — items 40 tall on a 60px rhythm, 16px icon + 12px gap */
.check-list {
  margin-top: 21px;
}

.check-list li {
  display: flex;
  gap: 12px;
  min-height: 40px;
}

.check-list li+li {
  margin-top: 20px;
}

.check-list__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--c-gold);
}

.check-list li p {
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  font-weight: 300;
}

.check-list strong {
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}

.services__outro {
  margin-top: 29.34px;
  font-size: 16px;
  line-height: 23px;
  color: #fff;
  font-weight: 300;
}

.services__col>.btn {
  margin-top: 29.33px;
}


/* ====================================================================
   9. POURQUOI NOUS CHOISIR — 16738:6694 · 1920 × 902 · #ECEFF2
   ==================================================================== */
.why {
  height: 902px;
  padding-top: 64px;
}

.why .section-head__title {
  margin-top: 16px;
}

.why__rows {
  margin-top: 48px;
}

.why__row {
  display: grid;
  gap: 10px;
  width: var(--container-w);
  margin-inline: auto;
}

.why__row--3 {
  grid-template-columns: repeat(3, 420px);
}

.why__row--2 {
  grid-template-columns: repeat(2, 420px);
  justify-content: center;
  margin-top: 10px;
}

/* Card — 420 × 235, 17px padding, #0F0F0F */
.card-dark {
  position: relative;
  width: 420px;
  height: 235px;
  padding: 17px;
  background-color: var(--c-ink-soft);
  color: var(--c-text-light);
}

.card-dark__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--c-gold-10);
  color: var(--c-gold);
}

.card-dark__icon svg {
  width: 15px;
  height: 15px;
}

.card-dark__title {
  margin-top: 16px;
  /* 73 − 17 − 40 */
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-medium);
}

.card-dark__text {
  margin-top: 12px;
  /* text sits 12px into the 101px paragraph box */
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  font-weight: 300;
}

.card-dark__tag {
  position: absolute;
  left: 17px;
  top: 191px;
  /* 179 + 12 */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold);
}

.card-dark__tag-rule {
  width: 24px;
  height: 1px;
  background-color: var(--c-gold);
}

.why__cta {
  display: inline-flex;
  margin: 48px auto 0;
  /* centred within the page */
}

.why {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why>.section-head,
.why>.why__rows {
  width: 100%;
}


/* ====================================================================
   10. NOTRE APPROCHE — 17353:5689 · 1920 × 984 · #FFFFFF
   ==================================================================== */
.approach {
  position: relative;
  height: 984px;
  background: var(--c-white) url("../images/approche-paysagement.jpg") top center no-repeat;
  background-size: cover;
}

/* Left column — 636 × 856 at (320, 64) */
.approach__col {
  padding-right: 50px;
}

.approach__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 42px;
  line-height: 60px;
  color: var(--c-text-dark);
}

.steps {
  margin-top: 32px;
}

.step {
  padding: 17px;
  background-color: var(--c-ink-soft);
  color: var(--c-text-light);
}

.step+.step {
  margin-top: 10px;
}

.step__head {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
}

.step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--c-gold-10);
  color: var(--c-gold);
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-medium);
}

.step__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-medium);
}

.step__text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 22px;
}

.approach__col>.btn {
  margin-top: 32px;
}

/* Photo — frame 925 × 984 at x = 995; image 1508 × 1131 at (−348, −74) */
.approach__figure {
  position: absolute;
  right: 0;
  top: 0;
  width: 925px;
  height: 984px;
  overflow: hidden;
}

.approach__figure img {
  position: absolute;
  left: -348px;
  top: -74px;
  width: 1508px;
  height: 1131px;
  object-fit: cover;
  max-width: none;
}


/* ====================================================================
   11. SECTEURS — 16738:7066 · 1920 × 674 · #ECEFF2
   ==================================================================== */
.sectors {
  height: 674px;
  padding-top: 50px;
}

.sectors .section-head__title--tight {
  margin-top: 24px;
  max-width: 888px;
}

.sector-grid {
  display: grid;
  grid-template-columns: 413px 412px 413px;
  gap: 21px;
  width: var(--container-w);
  margin: 48px auto 0;
  /* head 135 tall → 233 − 50 − 135 = 48 */
}

/* Card — 413 × 392 with a 1px border; media 411 × 208, body 411 × 182 */
.sector {
  border: 1px solid rgba(8, 8, 8, 0.08);
  background-color: var(--c-ink);
}

.sector__media {
  position: relative;
  height: 208px;
  overflow: hidden;
}

.sector__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim — node 16739:7907: 395.33 × 208 from the left edge */
.sector__scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: 395.33px;
  height: 208px;
  background: linear-gradient(90deg,
      rgba(8, 8, 8, 0.85) 0%,
      rgba(8, 8, 8, 0.45) 45%,
      rgba(8, 8, 8, 0) 100%);
}

.sector__badge {
  position: absolute;
  left: 16px;
  top: 156px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--c-gold-10);
  color: var(--c-gold);
  backdrop-filter: blur(2px);
}

.sector__badge svg {
  width: 14px;
  height: 14px;
}

.sector__body {
  padding: 28px 16px 0;
  height: 182px;
}

.sector__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-medium);
  color: var(--c-text-light);
}

.sector__text {
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  font-weight: 300;
}


/* ====================================================================
   12. PARTENAIRES — 17732:5021 · 1920 × 393
   ==================================================================== */
.partners {
  height: 393px;
  padding-top: 64px;
  background-color: var(--c-white);
}

.partners .section-head__title--tight {
  margin-top: 24px;
}

/* Bandeau pleine largeur — frames 227.13 × 99.98 sur un pas de 240.17.
   L'espacement passe par margin-right (et non gap) : la largeur totale
   devient un multiple exact du pas, ce qui rend la boucle invisible. */
.partners__marquee {
  margin-top: 48px;
  /* head 87 tall → 199 − 64 − 87 = 48 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* fondu discret sur les bords */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.partners__track {
  display: flex;
  width: max-content;
  animation: partners-loop 45s linear infinite;
}

/* 3 séries identiques → on translate d'un tiers pile poil */
@keyframes partners-loop {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% / 3), 0, 0);
  }
}

.partners__marquee:hover .partners__track,
.partners__marquee:focus-within .partners__track {
  animation-play-state: paused;
}

.partner {
  flex: 0 0 227.13px;
  height: 99.98px;
  margin-right: var(--partner-step);
  background-color: var(--c-mist);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Indicateur — barres rectangulaires beige, actives à tour de rôle
   en synchro avec les 45s de la boucle (4 × 11.25s) */
.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 28px auto 0;
}

.dots__seg {
  width: 26px;
  height: 5px;
  background-color: var(--c-gold-30);
  animation: dot-cycle 45s linear infinite;
}

.dots__seg:nth-child(1) {
  animation-delay: 0s;
}

.dots__seg:nth-child(2) {
  animation-delay: 11.25s;
}

.dots__seg:nth-child(3) {
  animation-delay: 22.5s;
}

.dots__seg:nth-child(4) {
  animation-delay: 33.75s;
}

@keyframes dot-cycle {

  0%,
  24.99% {
    background-color: var(--c-gold);
  }

  25%,
  100% {
    background-color: var(--c-gold-30);
  }
}


/* ====================================================================
   13. TÉMOIGNAGES — 16738:6985 · 1920 × 612
   ==================================================================== */
.testimonials {
  position: relative;
  overflow: hidden;
  color: var(--c-text-light);
  background: url(../images/temoignages-immeuble.jpg) top center no-repeat;
  background-size: cover;
  padding-bottom: 60px;
}

/* Background photo — node 16739:7874: 2132 × 1204 at x = −106 */
.testimonials__media {
  position: absolute;
  left: -106px;
  top: 0;
  width: 2132px;
  height: 1204px;
}

.testimonials__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}


.testimonials__head,
.testimonials .quotes {
  position: relative;
  z-index: 2;
}

/* Head block — 737 × 125 at (591.5, 64) */
.testimonials__head {
  padding-top: 64px;
  text-align: center;
  margin-bottom: 150px;
}

.testimonials__title {
  margin-top: 17px;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 41px;
  line-height: 48px;
}

/* Rating — 219.5 × 28: five 24px stars on a 32px step, 16px gap, label */
.rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 17px;
  height: 28px;
}

.rating__stars {
  display: flex;
  gap: 8px;
  color: var(--c-gold);
}

.rating__stars svg {
  width: 24px;
  height: 24px;
}

.rating__value {
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-semibold);
  color: var(--c-gold);
}

/* Cards — 1280 × 178 at y = 370; three 404-wide cards, 34px gaps */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 404px);
  gap: 34px;
  width: var(--container-w);
  margin: 181px auto 0;
  /* 370 − 64 − 125 = 181 */
}

.quote {
  height: 178px;
  padding: 16px;
  background-color: var(--c-white);
  color: var(--c-text-dark);
}

.quote__text {
  font-size: 15px;
  line-height: 26px;
  font-style: italic;
  color: var(--c-text-body);
}

.quote__author {
  margin-top: 18px;
  font-size: 15px;
  line-height: 24px;
  font-weight: var(--fw-semibold);
  color: var(--c-text-dark);
}


/* ====================================================================
   14. CONTACT — 16739:7976 · 1920 × 548 · #0F0F0F
   ==================================================================== */
.contact {
  padding-top: 64px;
  background-color: var(--c-ink-soft);
  color: var(--c-text-light);
  padding-bottom: 60px;
}

.contact__grid {
  display: grid;
  grid-template-columns: 656px 576px;
  justify-content: space-between;
  width: var(--container-w);
  margin-inline: auto;
}

.contact__col {
  padding-top: 11.5px;
}

/* 75.5 − 64 */

.contact__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 43px;
  line-height: 60px;
  color: #F0EAD8;
}

.contact__lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 23px;
  color: #fff;
  font-weight: 300;
}

.contact-list {
  margin-top: 48px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.contact-item+.contact-item {
  margin-top: 24px;
}

.contact-item__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--c-gold-10);
  color: var(--c-gold);
}

.contact-item__icon svg {
  width: 13px;
  height: 13px;
}

.contact-item__body {
  display: block;
}

.contact-item__label {
  display: block;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-gold);
}

.contact-item__value {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 300;
  color: #F0EAD8;
  transition: color var(--t-fast);
}

a.contact-item__value:hover {
  color: var(--c-gold);
}

/* --- Form — 576 × 420 -------------------------------------------- */
.form {
  width: 576px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 278px);
  gap: 20px;
}

.form__row+.form__row {
  margin-top: 20px;
}

.form>.field {
  margin-top: 20px;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-white);
}

.field__input {
  width: 100%;
  height: 46px;
  padding: 14px 17px;
  background-color: var(--c-black);
  border: 1px solid var(--c-border-dark);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 18px;
  transition: border-color var(--t-fast);
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.field__input:hover {
  border-color: rgba(201, 168, 76, 0.45);
}

.field__input:focus {
  border-color: var(--c-gold);
  outline: none;
}

.field__input--area {
  height: 146px;
  padding: 13px 17px;
  resize: vertical;
}

.form .btn--block {
  margin-top: 20px;
}


/* ====================================================================
   15. FOOTER — 16739:7960 · 1920 × 101 · #080808
   ==================================================================== */
.site-footer {
  height: 101px;
  background-color: var(--c-ink);
  color: var(--c-text-muted);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--container-w);
  height: 100%;
  margin-inline: auto;
}

/* Same crop as the header logo, scaled to the Figma 146 × 54.16 box */
.site-footer__logo {
  overflow: hidden;
  position: relative;
}


.site-footer__copy {
  width: 200px;
  font-size: 14px;
  line-height: 20px;
  text-align: right;
}


/* ====================================================================
   16. RESPONSIVE
   The 1920px frame above is the reference. Below it the page keeps the
   same rhythm but lets fixed columns become fluid, and fixed section
   heights become auto so nothing clips.
   ==================================================================== */

/* --- ≤ 1919px: fluid container, absolute header becomes a flex row -- */
@media (max-width: 1919px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-inline: clamp(16px, 4vw, 60px);
  }

  .site-header__logo,
  .site-nav,
  .site-header__cta {
    position: static;
    transform: none;
  }

  .site-nav__list {
    gap: clamp(14px, 1.6vw, 32px);
  }
}

/* --- ≤ 1360px: columns become proportional ------------------------- */
@media (max-width: 1360px) {
  :root {
    --container-w: min(1280px, calc(100vw - 96px));
  }

  .hero__content {
    left: 50%;
    width: min(1244px, calc(100vw - 96px));
    transform: translateX(-50%);
  }

  .hero__title,
  .hero__lead {
    width: 100%;
  }

  .about,
  .services,
  .why,
  .approach,
  .sectors,
  .partners,
  .testimonials,
  .contact {
    height: auto;
  }

  .about {
    padding-bottom: 64px;
  }

  .services {
    padding-bottom: 64px;
  }

  .why {
    padding: 60px 20px
  }

  .sectors {
    padding: 60px 20px
  }

  .section-head {
    padding: 0 20px;
  }

  .testimonials__head {
    margin-bottom: 50px;
  }

  .partners {
    padding-bottom: 64px;
  }

  .contact {
    padding-bottom: 64px;
  }

  .about__grid,
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .about__figure,
  .form {
    width: 100%;
  }

  .about__figure {
    height: auto;
    aspect-ratio: 654 / 645;
  }

  .about__figure>img {
    position: static;
    width: 100%;
    height: 100%;
  }

  .stats {
    left: 5%;
    top: auto;
    bottom: 22px;
    width: 90%;
    grid-template-columns: repeat(2, 1fr);
  }

  .services__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .services__figure {
    width: 100%;
    height: auto;
    aspect-ratio: 680 / 613;
  }

  .services__figure img {
    position: static;
    width: 100%;
    height: 100%;
  }

  .why__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .why__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 850px;
    margin-inline: auto;
  }

  .card-dark {
    width: 100%;
    height: auto;
    min-height: 235px;
  }

  .approach {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 64px clamp(24px, 5vw, 48px);
  }

  .approach__col {
    position: static;
    width: 100%;
  }

  .approach__figure {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 480px;
  }

  .approach__figure img {
    position: static;
    width: 100%;
    height: 100%;
  }

  .sector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sector__body {
    height: auto;
    padding-bottom: 28px;
  }

  .quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 120px;
  }

  .quote {
    height: auto;
    min-height: 178px;
  }

  .testimonials {
    padding-bottom: 64px;
  }

  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner {
    width: min(1280px, calc(100vw - 48px));
  }
}

/* --- ≤ 1100px: single-column stacks, off-canvas navigation --------- */
@media (max-width: 1100px) {
  .nav-toggle {
    display: block;
    position: static;
    transform: none;
    order: 3;
  }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: none;
    display: none;
    padding: 24px clamp(16px, 4vw, 60px);
    background-color: var(--c-black);
    border-bottom: 1px solid var(--c-gold);
  }

  .nav-open .site-nav {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .site-header__cta {
    display: none;
  }

  .hero {
    height: auto;
    /* le header est fixe : on réserve sa hauteur */
    padding: calc(var(--header-h) + 60px) 0 96px;
  }

  .hero__content {
    position: static;
    transform: none;
    margin-inline: auto;
  }

  .hero__media {
    inset: 0;
    height: 100%;
  }

  .hero__scrim {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .82) 100%);
  }

  .hero__title {
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.25;
  }

  .hero__lead {
    font-size: 16px;
    line-height: 26px;
  }

  .about__grid,
  .contact__grid,
  .services__grid,
  .approach {
    grid-template-columns: minmax(0, 1fr);
  }

  .approach__col {
    order: 1;
  }

  .approach__figure {
    order: 2;
    min-height: 380px;
  }

  .section-head__title,
  .section-head__title--tight,
  .about__title,
  .approach__title,
  .contact__title,
  .testimonials__title,
  .hero__title {
    max-width: none;
  }

  .section-head__title {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.3;
  }

  .section-head__title--tight {
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.25;
  }

  .about__title,
  .approach__title,
  .contact__title {
    font-size: clamp(28px, 3.8vw, 43px);
    line-height: 1.25;
  }

  .testimonials__title {
    font-size: clamp(26px, 3.4vw, 41px);
    line-height: 1.25;
  }

  .why__row--3,
  .why__row--2,
  .sector-grid,
  .quotes {
    grid-template-columns: minmax(0, 1fr);
  }

  .why__row--2 {
    margin-top: 10px;
  }

  .quotes {
    margin-top: 64px;
  }

  .form {
    width: 100%;
  }
}

/* --- ≤ 720px: phone ------------------------------------------------ */
@media (max-width: 720px) {
  .stat__label {
    font-size: 11px;
  }

  .site-header__logo img {
    height: 60px;
  }

  :root {
    --container-w: calc(100vw - 40px);
  }

  .feature-grid,
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .eyebrow {
    white-space: normal;
  }

  .eyebrow__text {
    font-size: 13px;
    letter-spacing: 1.8px;
  }

  .eyebrow__rule {
    width: 20px;
  }

  .hero {
    padding: calc(var(--header-h) + 44px) 0 72px;
    padding-top: 99px;
  }

  .hero__media {

    height: 360px;
  }

  .hero__content {

    margin-top: -100px;
    padding: 0 20px;
    width: 100%;
  }

  .about {
    padding-bottom: 40px;
    padding-top: 40px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    justify-content: center;
  }

  .btn--lg {
    padding: 14px 22px;
    font-size: 14px;
    letter-spacing: 1.8px;
  }

  .stats {
    position: static;
    width: 100%;
    padding: 16px 0 0;
    grid-template-columns: repeat(2, 1fr);
    background: #000;
    margin-top: -2px;
    padding-bottom: 20px;
  }

  .card-dark__tag {
    position: static;
    margin-top: 15px;
  }

  .approach {
    background: #fff;
    padding: 0 0 40px 0;
  }

  .testimonials {
    padding: 0px 20px;
  }

  .approach__col {
    padding-right: 0;
  }

  .about__figure {
    overflow: visible;
  }

  .site-footer {
    height: auto;
    padding: 24px 0;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .site-footer__logo {
    margin-left: 0;
  }

  .site-footer__copy {
    width: auto;
    text-align: center;
  }

  .partner {
    flex-basis: 160px;
    height: 80px;
  }

  .dots__seg {
    width: 20px;
  }
}

/* ====================================================================
   17. ANIMATIONS AU SCROLL
   La classe .js-anim est posée sur <html> par un script inline dans le
   <head> (donc avant le premier rendu : aucun flash de contenu).
   Le JS de bas de page ajoute .is-in quand l'élément entre dans le
   viewport. La liste de sélecteurs ci-dessous doit rester identique à
   la constante ANIM du script.
   ==================================================================== */

.js-anim :is(.hero__content>*,
  .section-head>*,
  .testimonials__head>*,
  .about__col>*,
  .services__col>*,
  .approach__col>*,
  .contact__col>*,
  .why__row>.card-dark,
  .sector-grid>.sector,
  .partners__marquee,
  .dots,
  .why__cta,
  .form) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
  will-change: opacity, transform;
}

/* Visuels latéraux : glissement horizontal */
.js-anim .about__figure {
  opacity: 0;
  transform: translate3d(44px, 0, 0);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}

.js-anim .services__figure {
  opacity: 0;
  transform: translate3d(-44px, 0, 0);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}

/* État révélé */
.js-anim .is-in {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* Cascade sur les enfants d'une même colonne / grille */
.js-anim :is(.hero__content,
  .section-head,
  .testimonials__head,
  .about__col,
  .services__col,
  .approach__col,
  .contact__col)>*:nth-child(2) {
  transition-delay: 90ms;
}

.js-anim :is(.hero__content,
  .section-head,
  .testimonials__head,
  .about__col,
  .services__col,
  .approach__col,
  .contact__col)>*:nth-child(3) {
  transition-delay: 180ms;
}

.js-anim :is(.hero__content,
  .section-head,
  .testimonials__head,
  .about__col,
  .services__col,
  .approach__col,
  .contact__col)>*:nth-child(4) {
  transition-delay: 270ms;
}

.js-anim :is(.hero__content,
  .about__col,
  .services__col,
  .approach__col,
  .contact__col)>*:nth-child(n+5) {
  transition-delay: 360ms;
}

.js-anim :is(.why__row, .sector-grid)>*:nth-child(2) {
  transition-delay: 120ms;
}

.js-anim :is(.why__row, .sector-grid)>*:nth-child(3) {
  transition-delay: 240ms;
}

/* Micro-interactions cohérentes avec le reste du site */
.card-dark,
.sector {
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.card-dark:hover,
.sector:hover {
  transform: translateY(-6px);
}

.partner {
  transition: filter var(--t-base), opacity var(--t-base);
}

/* --- Accessibilité : mouvement réduit ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .partners__track,
  .dots__seg {
    animation: none !important;
  }

  .dots__seg:first-child {
    background-color: var(--c-gold);
  }

  .card-dark:hover,
  .sector:hover {
    transform: none;
  }
}

/* ── Validation formulaire ── */
.field__error {
  display: none;
  font-size: 0.75rem;
  color: #e74c3c;
  margin-top: 5px;
}

.was-validated .field__input:invalid {
  border-color: #e74c3c;
}

.was-validated .field__input:valid {
  border-color: var(--c-gold, #c9a84c);
}

.was-validated .field__input:invalid~.field__error {
  display: block;
}