@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --sapin: #05484E;
  --encre: #0F1F21;
  --enduit: #F2F1EC;
  --ciment: #66777A;
  --rouleau: #E2742A;
  --sable: #E6C27A;

  --wrap: 1400px;
  --gut: 16px;
  --top-h: 72px;
  --radius: 4px;
}
@media (min-width: 768px) { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--top-h); }
body {
  margin: 0;
  background: var(--enduit);
  color: var(--encre);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  font-stretch: 100%;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* display face: the wide cut of Archivo */
h1, h2, .step-word, .services h3, .zone, .duree-n, .big-tel, .foot-name {
  font-stretch: 125%;
  font-weight: 760;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--radius);
  font-weight: 650; font-size: 17px; text-decoration: none; text-align: center;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.btn-call { background: var(--rouleau); color: var(--encre); }
.btn-line { box-shadow: inset 0 0 0 2px var(--sapin); color: var(--sapin); }
.text-link { color: var(--sapin); text-decoration: underline; text-decoration-color: var(--rouleau); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .btn-call:hover { background: #C9611C; }
  .btn-line:hover { background: var(--sapin); color: var(--enduit); }
  .text-link:hover { color: var(--rouleau); }
}

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--enduit); }
.top-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  height: var(--top-h); display: flex; align-items: center; gap: 32px;
}
.brand { flex: none; }
.brand img { height: 40px; width: auto; }
@media (max-width: 419px) { .nav-s { display: none; } }
.top-nav { display: flex; margin-left: auto; gap: 16px; font-weight: 600; font-size: 15px; }
.top-nav a { text-decoration: none; color: var(--sapin); }
.top-call { display: none; min-height: 44px; padding: 0 16px; font-size: 16px; }
@media (min-width: 900px) {
  .brand img { height: 46px; }
  .top-nav { gap: 32px; font-size: 17px; }
  .top-call { display: inline-flex; }
}
@media (hover: hover) and (pointer: fine) { .top-nav a:hover { color: var(--rouleau); } }

/* hero */
.hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--top-h)); }
.hero-photo { order: -1; height: 40svh; min-height: 220px; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-text { padding: 24px var(--gut) 96px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.hero h1 { font-size: clamp(29px, 9.2vw, 64px); color: var(--sapin); }
@media (min-width: 600px) and (max-width: 899px) { .hero-photo { height: 46svh; } .hero-text { padding-top: 40px; } .lead { font-size: 20px; } .hero .actions .btn { flex: 0 0 auto; } }
.lead { font-size: 18px; line-height: 1.45; max-width: 34em; }
.proof { font-weight: 600; color: var(--encre); }
.stars { color: var(--sable); letter-spacing: 2px; margin-right: 4px; -webkit-text-stroke: .5px #B8913F; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero .actions .btn { flex: 1 1 220px; }
.hero-call { display: none; }

@media (min-width: 900px) {
  .hero { flex-direction: row; min-height: calc(100vh - var(--top-h)); }
  .hero-text {
    flex: 0 0 42%; justify-content: center; gap: 24px;
    padding: 48px 48px 64px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  }
  .hero-photo { order: 0; flex: 1; height: auto; }
  .hero-photo img { object-position: 40% 50%; }
  .hero h1 { font-size: clamp(44px, 4.4vw, 76px); }
  .lead { font-size: 20px; }
  .hero .actions .btn { flex: 0 0 auto; }
  .hero-call { display: inline-flex; }
}

/* chantiers: avant, pendant, après */
.chantiers { padding: 72px 0 0; }
.chantier { margin-bottom: 56px; }
.chantier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.chantier-head h3 { font-size: 22px; font-weight: 700; color: var(--encre); }
.chantier-link { font-size: 15px; color: var(--ciment); text-underline-offset: 3px; }
.duree { font-size: 16px; color: var(--ciment); }
.duree-n { font-size: 40px; color: var(--sapin); margin-right: 4px; }

.steps {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gut) 8px; scroll-padding: 0 var(--gut);
  scrollbar-width: thin;
}
.steps li { flex: 0 0 84%; scroll-snap-align: start; }
.step-word { font-size: clamp(44px, 14vw, 64px); color: var(--ciment); margin-bottom: 8px; }
.steps li:last-child .step-word { color: var(--sapin); }
.steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: #DAD9D2; }
.step-note { margin-top: 8px; font-size: 15px; color: var(--ciment); max-width: 32em; }

@media (min-width: 900px) {
  .chantiers { padding-top: 120px; }
  .chantier { margin-bottom: 120px; }
  .chantier:last-child { margin-bottom: 104px; }
  .chantier-head { margin-bottom: 8px; }
  .steps {
    display: grid; overflow: visible; gap: 24px;
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  }
  .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-3 .step-word { font-size: clamp(48px, 5.4vw, 84px); }
  .steps-2 .step-word { font-size: clamp(64px, 8vw, 128px); }
}

/* avis */
.avis { padding: 24px 0 88px; }
.avis-in { display: grid; gap: 48px; }
.quote blockquote p { font-size: clamp(22px, 5.6vw, 28px); line-height: 1.3; font-weight: 500; color: var(--sapin); }
.quote blockquote p::before { content: "« "; }
.quote blockquote p::after { content: " »"; }
.quote figcaption { margin-top: 12px; font-weight: 650; }
.avis-link { justify-self: start; }
@media (min-width: 900px) {
  .avis-in { grid-template-columns: 7fr 5fr; column-gap: 80px; row-gap: 32px; align-items: start; }
  .quote blockquote p { font-size: clamp(28px, 2.6vw, 40px); }
  .quote-2 { margin-top: 160px; }
  .quote-2 blockquote p { font-size: clamp(22px, 1.8vw, 28px); }
  .avis-link { grid-column: 1; }
}

/* le métier */
.metier { background: var(--sapin); color: var(--enduit); padding: 80px 0; }
.services li { padding: 24px 0; border-top: 1px solid rgba(242, 241, 236, .22); }
.services li:last-child { border-bottom: 1px solid rgba(242, 241, 236, .22); }
.services h3 { font-size: clamp(30px, 8vw, 40px); }
.services p { margin-top: 8px; font-size: 17px; color: rgba(242, 241, 236, .8); max-width: 30em; }
.devis-line { margin-top: 40px; font-size: 20px; font-weight: 600; }
.metier .text-link { color: var(--enduit); margin-left: 8px; white-space: nowrap; }
@media (min-width: 900px) {
  .metier { padding: 120px 0; }
  .services li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: baseline; padding: 28px 0; }
  .services h3 { font-size: clamp(36px, 3.6vw, 52px); }
  .services p { margin-top: 0; font-size: 19px; }
}
@media (hover: hover) and (pointer: fine) { .metier .text-link:hover { color: var(--sable); } }

/* zone, entreprise, horaires, contact */
.infos { padding: 96px 0 64px; }
.zone { font-size: clamp(40px, 12vw, 104px); color: var(--sapin); max-width: 14em; }
.zone-k { color: var(--encre); }
.zone span { display: block; }
@media (min-width: 600px) { .zone span { display: inline; } .zone { font-size: clamp(52px, 6.8vw, 104px); } }
.zone-sub { margin-top: 16px; font-size: 20px; color: var(--ciment); }
.infos-grid { display: grid; gap: 48px; margin-top: 64px; }
.info h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ciment); margin-bottom: 12px; }
.info p + p { margin-top: 12px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(15, 31, 33, .12); max-width: 360px; }
.hours dt { font-weight: 600; }
.hours dd { color: var(--encre); font-variant-numeric: tabular-nums; }
.hours .off { color: var(--ciment); }
.big-tel { font-size: clamp(28px, 7.6vw, 36px); color: var(--sapin); text-decoration: none; white-space: nowrap; }
@media (min-width: 900px) {
  .infos { padding: 140px 0 80px; }
  .infos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 88px; }
}

/* close */
.close { padding: 64px 0 112px; }
.close-in::before { content: ""; display: block; height: 2px; background: var(--sapin); margin-bottom: 48px; }
.close h2 { font-size: clamp(32px, 8.4vw, 72px); color: var(--sapin); max-width: 12em; margin-bottom: 32px; }
.close .actions .btn { flex: 1 1 240px; }
@media (min-width: 900px) { .close .actions .btn { flex: 0 0 auto; } }

/* footer */
.foot { background: var(--encre); color: rgba(242, 241, 236, .78); padding: 48px 0 112px; font-size: 15px; }
.foot-in { display: grid; gap: 16px; }
.foot a { color: inherit; }
.foot-name { font-size: 22px; color: var(--enduit); }
.foot-v { color: rgba(242, 241, 236, .55); }
@media (min-width: 900px) {
  .foot { padding-bottom: 48px; }
  .foot-in { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  .foot-v { grid-column: 1 / -1; }
}

/* pinned call on the phone */
.pin {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30; min-height: 56px; display: flex; align-items: center; justify-content: center;
  background: var(--rouleau); color: var(--encre); font-weight: 700; font-size: 18px;
  text-decoration: none; border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(15, 31, 33, .22);
}
@media (min-width: 900px) { .pin { display: none; } }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .chantier.reveal { opacity: 1; transform: none; }
.js .chantier.reveal .chantier-head { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.js .chantier.reveal.in .chantier-head { opacity: 1; transform: none; }
.js .reveal .steps li { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in .steps li { opacity: 1; transform: none; }
.js .reveal.in .steps li:nth-child(2) { transition-delay: .08s; }
.js .reveal.in .steps li:nth-child(3) { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal .steps li { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}