:root {
  /* Couleurs */
  --fd-color-sage: #708c7b;
  --fd-color-petrol: #2f5961;
  --fd-color-copper: #b87742;
  --fd-color-ivory: #f8f5ef;
  --fd-color-white: #ffffff;
  --fd-color-text: #2b2b2b;
  --fd-color-text-soft: #626262;

  /* Largeurs */
  --fd-container: 1280px;
  --fd-container-text: 760px;

  /* Espacements */
  --fd-space-1: 0.5rem;
  --fd-space-2: 1rem;
  --fd-space-3: 1.5rem;
  --fd-space-4: 2rem;
  --fd-space-5: 3rem;
  --fd-space-6: 4rem;
  --fd-space-7: 6rem;
  --fd-space-8: 8rem;

  /* Arrondis */
  --fd-radius-sm: 0.5rem;
  --fd-radius-md: 1rem;
  --fd-radius-lg: 2rem;

  /* Transitions */
  --fd-transition: 180ms ease;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fd-color-ivory);
  color: var(--fd-color-text);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 1rem;
  line-height: 1.65;
}

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

a {
  color: var(--fd-color-petrol);
}

h1,
h2,
h3,
h4 {
  color: var(--fd-color-petrol);
  line-height: 1.15;
  font-weight: 500;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

p {
  margin-top: 0;
}

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