@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 {
  --ardoise: #23262A;
  --neuve: #F5F3EE;
  --sous-couche: #ECE8DF;
  --crepi: #D6C6A8;
  --haie: #2F4A35;
  --enduit: #6E685C;
  --gutter: 16px;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--neuve);
  color: var(--ardoise);
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--haie); outline-offset: 3px; }
.adresse a:focus-visible, .foot a:focus-visible, .call-bar:focus-visible, .call-top:focus-visible { outline-color: var(--crepi); }
h1, h2, h3, p, figure, dl, dd { margin: 0; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Actions */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--haie); color: var(--neuve);
  font-weight: 650; font-size: 17px; text-decoration: none;
  border-radius: var(--radius);
  transition: background-color .3s ease;
}
.link {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--haie); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-underline-offset .3s ease;
}
.link-light { color: var(--neuve); }

/* The wall: the old coat (crépi) under a fresh coat laid from the left, its edge the roller's last pass */
.hero, .close { position: relative; background: var(--crepi); overflow: hidden; }
.coat {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--coat, 84%);
  background: var(--neuve);
}
.coat::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%;
  width: 40px; margin-left: -1px;
  background: url("edge.svg") 0 0 / 100% 100% no-repeat;
}

.hero { min-height: 100vh; min-height: 100svh; --coat: 64%; }
.hero-in {
  position: relative; min-height: inherit;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding-top: 24px; padding-bottom: 40px;
}
.kicker { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--enduit); }
.name {
  font-stretch: 112%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(60px, 21vw, 112px);
  line-height: .86; letter-spacing: -.01em;
}
.name span { display: block; }
.lede { font-size: 28px; line-height: 1.15; font-weight: 500; margin-bottom: 8px; }
.proof { font-size: 17px; margin-bottom: 32px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }

/* Desktop: the call stays one tap away, top right */
.call-top {
  display: none;
  position: fixed; top: 16px; right: 16px; z-index: 20;
  min-height: 48px; padding: 0 20px; align-items: center;
  background: var(--haie); color: var(--neuve);
  font-weight: 650; text-decoration: none; border-radius: var(--radius);
  transition: background-color .3s ease;
}

/* Phone: the call pinned under the thumb, once the hero's button has gone by */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; align-items: baseline; gap: 12px;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: var(--haie); color: var(--neuve);
  font-weight: 650; text-decoration: none;
  transition: transform .3s ease;
}
.call-bar span { font-weight: 400; opacity: .85; }
.call-bar.is-hidden { transform: translateY(110%); }

/* Le métier: opens on the title */
.metier { padding-top: 96px; padding-bottom: 96px; }
.trade {
  font-stretch: 112%; font-weight: 800;
  font-size: clamp(48px, 13.5vw, 128px);
  line-height: .95; letter-spacing: -.02em;
  margin-bottom: 40px;
}
.trade span { display: block; }
.metier-text { max-width: 34em; }
.metier-text p { font-size: 21px; line-height: 1.5; margin-bottom: 16px; }

/* Chantiers: opens on the photos */
.chantiers { padding-bottom: 96px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.slot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--crepi); }
.slot figcaption { font-size: 14px; color: var(--enduit); margin-top: 8px; }
.chantiers-titre { font-stretch: 112%; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.015em; }

/* Adresse: opens on a number */
.adresse { background: var(--ardoise); color: var(--neuve); padding: 64px 0 80px; }
.adresse-in { display: grid; gap: 56px; }
.numero {
  font-stretch: 112%; font-weight: 800;
  font-size: clamp(160px, 52vw, 320px);
  line-height: .78; letter-spacing: -.04em;
  color: var(--crepi);
  margin-bottom: 24px;
}
.addr { font-size: 28px; line-height: 1.2; font-weight: 600; margin-bottom: 8px; }
.depuis { color: var(--crepi); margin-bottom: 16px; }
.horaires h3 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.hours-note { color: var(--crepi); margin-bottom: 16px; }
.horaires:has(dd:not(:empty)) .hours-note { display: none; }
.horaires dl div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-top: 1px solid rgba(245, 243, 238, .16);
}
.horaires dl div:last-child { border-bottom: 1px solid rgba(245, 243, 238, .16); }
.horaires dd { color: var(--crepi); text-align: right; }
.horaires dd span + span::before { content: ", "; }
.horaires dd:empty::before { content: "–"; }

/* Close: the wall again, the number as large as the name */
.close { --coat: 88%; }
.close-in { position: relative; padding-top: 96px; padding-bottom: 112px; }
.close-titre { font-size: 28px; line-height: 1.2; font-weight: 600; margin-bottom: 16px; max-width: 16em; text-wrap: balance; }
.phone-big {
  display: block; width: max-content; max-width: 100%;
  font-stretch: 88%; font-weight: 800;
  font-size: clamp(46px, 14.6vw, 150px);
  line-height: 1; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap;
  margin-bottom: 32px;
}

/* Footer */
.foot { background: var(--ardoise); color: var(--neuve); padding: 48px 0 112px; font-size: 14px; line-height: 1.7; }
.foot-in { display: grid; gap: 24px; }
.foot-name { font-size: 17px; font-weight: 700; }
.foot-name span, .foot-legal span { font-size: 14px; font-weight: 400; color: var(--crepi); }
.foot a { text-underline-offset: 4px; }
.foot-legal a { margin-right: 16px; }

@media (min-width: 768px) {
  :root { --gutter: 40px; }
  .hero { --coat: 52%; }
  .hero-in { padding-top: 40px; padding-bottom: 64px; }
  .name { font-size: min(14vw, 24vh, 220px); }
  .lede { font-size: 40px; }
  .slots { gap: 16px; }
  .metier { padding-top: 144px; padding-bottom: 144px; }
  .chantiers { padding-bottom: 144px; }
  .slots { margin-bottom: 32px; }
  .chantiers-titre { font-size: 64px; }
  .adresse { padding: 112px 0; }
  .adresse-in { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 80px; }
  .close { --coat: 74%; }
  .close-in { padding-top: 144px; padding-bottom: 160px; }
  .close-titre { font-size: 40px; }
  .foot { padding-bottom: 48px; }
  .foot-in { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .hero { --coat: 60%; }
  .name { font-size: min(10.6vw, 26vh, 190px); white-space: nowrap; }
  .name span { display: inline; }
  .metier { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
  .trade { margin-bottom: 0; font-size: min(7.6vw, 128px); }
  .chantiers { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; align-items: end; }
  .chantiers .slots { margin-bottom: 0; }
  .call-top { display: inline-flex; }
  .call-bar { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .call-top:hover { background: #253B2A; }
  .link:hover { text-underline-offset: 9px; }
}

/* Reveal, once, the children of a block staggered */
.js .reveal > * { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > * { opacity: 1; transform: none; transition: none; }
  .btn, .link, .call-top, .call-bar { transition: none; }
}