@font-face {
  font-family: Montserrat;
  src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --vert: #334628;
  --blanc: #fff;
  --beige: #e6e1d8;
  --gouttiere: clamp(24px, 11vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--vert); -webkit-text-size-adjust: 100%; scrollbar-color: var(--beige) var(--vert); }

body {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  color: var(--blanc);
  background: var(--vert);
  font: 400 17px/26px Poppins, system-ui, sans-serif;
}

::selection { color: var(--vert); background: var(--beige); }

.courbes {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 51.4%;
  height: auto;
  stroke: var(--beige);
  stroke-opacity: .28;
  pointer-events: none;
}
.courbes path { vector-effect: non-scaling-stroke; stroke-width: 1px; }

main {
  position: relative;
  width: 100%;
  padding: 72px var(--gouttiere);
}

.logo { display: block; width: 190px; height: auto; }

h1 {
  max-width: 19.5em;
  margin: 56px 0 0;
  font: 600 clamp(26px, 2.8vw, 40px)/1.25 Montserrat, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.corps { max-width: 600px; margin: 24px 0 0; }

.contacts { display: flex; flex-wrap: wrap; gap: 24px 64px; margin-top: 40px; }

h2 { margin: 0 0 8px; font: 600 13px/20px Poppins, system-ui, sans-serif; }

ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }

a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blanc);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness .15s ease-out;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; border-radius: 2px; }
a svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

@media (min-width: 1024px) {
  h1 { font-size: clamp(38px, 2.8vw, 40px); }
}

@media (max-width: 1400px), (max-width: 1600px) and (max-height: 860px) {
  .courbes { width: 44%; }
}

@media (max-width: 1320px) {
  .contacts { flex-direction: column; }
}

@media (max-height: 800px) {
  main { padding-top: 32px; padding-bottom: 32px; }
}

@media (max-height: 700px) {
  main { padding-top: 24px; padding-bottom: 24px; }
  .logo { width: 150px; }
  h1 { margin-top: 40px; }
}

@media (max-width: 720px) {
  :root { --gouttiere: 24px; }
  body { align-items: flex-start; }
  main { padding-top: 48px; padding-bottom: 66vw; }
  .logo { width: 150px; }
  h1 { margin-top: 40px; }
  .courbes { width: 80%; }
  .contacts a[href^="mailto"] { font-size: clamp(14px, 4.5vw, 17px); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}