@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --mur: #e4eae5;
  --laiton: #a68f57;
  --laiton-clair: #d2c49a;
  --vis: #8a7643;
  --gravure: #171713;
  --sol: #30302c;
  --feuille: #2e5b3c;
  --feuille-fonce: #234a2f;
  --texte-doux: #4a4c46;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --wrap: 1400px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mur);
  color: var(--gravure);
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: 0;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--feuille); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gravure); outline-offset: 3px; }
.foot a:focus-visible { outline-color: var(--laiton-clair); }

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

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--mur);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 64px; }
.brand {
  color: var(--gravure); text-decoration: none;
  font-style: italic; font-weight: 600; font-size: 1.1875rem; line-height: 1.1;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--s3);
  border-radius: var(--radius);
  background: var(--feuille); color: #fff;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  transition: background-color .3s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.link-arrow { font-weight: 600; font-size: 1.0625rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--feuille-fonce); }
  .link-arrow:hover { text-decoration-thickness: 2px; }
}

/* Hero */
.hero { padding: var(--s3) 0 var(--s8); min-height: calc(100vh - 64px); display: flex; align-items: center; }
@supports (height: 100svh) { .hero { min-height: calc(100svh - 64px); } }
.hero__in { display: grid; gap: var(--s4); align-items: center; }
.hero__aside { display: grid; gap: var(--s3); }
.hero__name { display: none; }
.hero__proof { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.35; max-width: 26ch; }
.hero__actions .btn { display: none; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }

/* The plate */
.plate {
  position: relative;
  background: var(--laiton);
  color: var(--gravure);
  padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 80px);
  text-align: center;
  font-style: italic;
}
.screw {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--vis);
}
.screw::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px;
  background: var(--laiton-clair); transform: rotate(-30deg); opacity: .7;
}
.screw--tl { top: 14px; left: 14px; } .screw--tr { top: 14px; right: 14px; }
.screw--bl { bottom: 14px; left: 14px; } .screw--br { bottom: 14px; right: 14px; }
.plate__title {
  font-weight: 600; font-size: clamp(2.5rem, 6.2vw, 5.25rem); line-height: 1.02;
  letter-spacing: -0.005em;
}
.plate__title span { display: block; }
.plate__perm {
  margin-top: clamp(24px, 3.4vw, 48px);
  font-weight: 700; font-size: clamp(1.0625rem, 2.1vw, 1.75rem); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .02em;
}
.plate__perm small { font-size: 1em; text-transform: none; font-weight: 700; letter-spacing: 0; }
.plate__slots {
  margin: clamp(16px, 2.4vw, 32px) auto 0; max-width: 34em;
  display: grid; gap: 6px;
  font-weight: 600; font-size: clamp(.9375rem, 1.7vw, 1.375rem); line-height: 1.25;
}
.plate__slots p { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1.2em; text-align: left; }
.plate__days { text-transform: uppercase; letter-spacing: .02em; }
.plate__tel {
  display: inline-block; margin-top: clamp(24px, 3.4vw, 48px);
  color: var(--gravure); text-decoration: none;
  font-weight: 700; font-size: clamp(2.625rem, 7.4vw, 5.75rem); line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
}

/* The plate's lettering follows the plate's own width, as engraving does */
@supports (container-type: inline-size) {
  .plate-box { container-type: inline-size; }
  .plate__title { font-size: 11.4cqi; }
  .plate__perm { font-size: clamp(15px, 3.9cqi, 30px); }
  .plate__slots { font-size: clamp(14px, 3cqi, 23px); }
  .plate__tel { font-size: 12.2cqi; }
}

/* Sections */
.section { padding: var(--s12) 0; }
.h2 { font-style: italic; font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.05; }
.h3 { font-style: italic; font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.muted { color: var(--texte-doux); }

/* Au cabinet ou chez vous */
.ways__head span { display: block; }
.ways__grid { margin-top: var(--s8); display: grid; gap: var(--s8); }
.way { display: grid; gap: var(--s2); align-content: start; }
.way__photo { margin-bottom: var(--s1); max-width: 480px; }
.way__photo img { width: 100%; border-radius: var(--radius); }
.way__photo figcaption { margin-top: var(--s1); font-size: .9375rem; color: var(--texte-doux); }
.way__num {
  font-style: italic; font-weight: 600; font-size: clamp(5.5rem, 14vw, 13rem); line-height: .8;
  color: var(--laiton);
}
.way p { max-width: 40ch; }

/* Équipe */
.team { background: var(--gravure); color: var(--mur); }
.team__in { display: grid; gap: var(--s6); }
.team__names li {
  font-style: italic; font-weight: 600; font-size: clamp(3.25rem, 10vw, 8.5rem); line-height: .98;
  color: var(--laiton-clair);
}
.team__text { display: grid; gap: var(--s3); align-content: end; max-width: 46ch; }
.team__text .h3 { color: #fff; }
.team__text p { color: #d9dcd6; }

/* Honoraires */
.fees { padding: var(--s8) 0 var(--s12); }
.fees__title { max-width: 14ch; }
.fees__in { display: grid; gap: var(--s4); }
.fees__list { display: grid; gap: var(--s3); }
.fees__list dt { font-weight: 700; }
.fees__list dd { max-width: 52ch; }
.todo { color: var(--texte-doux); font-style: italic; }
.law { font-size: .9375rem; color: var(--texte-doux); max-width: 70ch; }

/* Nous trouver */
.find { padding-top: 0; }
.find__in { display: grid; gap: var(--s6); align-items: start; }
.find__photo img { width: 100%; border-radius: var(--radius); }
.find__photo figcaption { margin-top: var(--s1); font-size: .9375rem; color: var(--texte-doux); }
.find__info { display: grid; gap: var(--s3); }
.find__addr { font-size: 1.25rem; }
.hours { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s4); row-gap: 6px; font-variant-numeric: tabular-nums; }
.hours dt { font-weight: 600; }
.hours .off { color: var(--texte-doux); }
.hours__note { font-size: .9375rem; max-width: 36ch; }
.hours__title { margin-top: var(--s2); }

/* Close: the plate's last line, drawn large */
.close { background: var(--laiton); color: var(--gravure); padding: var(--s12) 0; text-align: center; font-style: italic; }
.close__lead span { display: inline-block; }
.close__lead { font-weight: 600; font-size: clamp(1.375rem, 2.6vw, 2.125rem); line-height: 1.2; }
.close__tel {
  display: block; margin: var(--s2) 0 var(--s4);
  color: var(--gravure); text-decoration: none;
  font-weight: 700; font-size: clamp(3rem, 12vw, 10.5rem); line-height: 1; white-space: nowrap;
}
.close .btn { font-style: normal; }

/* Footer */
.foot { background: var(--sol); color: var(--laiton-clair); padding: var(--s8) 0 calc(var(--s8) + 72px); font-size: .9375rem; }
.foot a { color: var(--laiton-clair); }
.foot__in { display: grid; gap: var(--s3); }
.foot__name { font-style: italic; font-weight: 600; font-size: 1.375rem; color: #f1ede2; }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.foot__credit { color: #a9a796; }

/* Phone call bar */
.top .top__call { display: none; }
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--mur);
}
.callbar .btn { width: 100%; }

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

/* Phone: the plate gets the room a real plate has */
@media (max-width: 759px) {
  .plate { padding: 60px 24px 56px; }
  .plate__perm, .plate__tel { margin-top: 36px; }
  .plate__slots { margin-top: 20px; gap: 8px; }
  .hero__in { gap: var(--s4); }
  .hero { padding: var(--s2) 0 88px; } /* 88px: the pinned call bar, so the plate sits centred in what the eye sees */
  .ways { padding-top: var(--s8); }
}

/* Wider screens */
@media (min-width: 760px) {
  .ways__grid { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s12); }
  .fees__in { grid-template-columns: 5fr 7fr; gap: var(--s8); }
  .find__in { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}
@media (min-width: 1000px) {
  .top .top__call { display: inline-flex; min-height: 44px; }
  .hero__actions .btn { display: inline-flex; }
  .hero__name { display: block; font-style: italic; font-weight: 600; font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.02; }
  .hero__name span { display: block; }
  .fees { padding: var(--s8) 0 var(--s16); }
  .callbar { display: none; }
  .foot { padding-bottom: var(--s8); }
  .hero__in { grid-template-columns: 7fr 5fr; gap: var(--s8); }
  .team__in { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: end; }
  .section { padding: var(--s16) 0; }
  .find { padding-top: 0; }
}